「API key」を使う「Ver.1タイプ」 
  「API key」を使わない「Ver.2タイプ」 
 ※「v1タイプ」のサービス・サポートは終了しているようです。 [2016/01]

地図画像を作り、携帯サイトなどで使う
= with Google Static Maps API v1 =

Google Mapsを利用して、マーカーなどを付けた地図画像を作ることができます。
 ※このタイプのサービス・サポートは終了しているようです。[2016/01]
  Googleからのお知らせ。
  「Ver.2 タイプ」をご利用ください。
 作業    ▼作業[2]へ▼  ▼作業[3]へ▼
住所,地名,駅名などで検索し、表示する場所を決めてください。表示されたマーカーは摘んで移動し、微調整をすることができます。
 
場所:   
ズームレベルを決めます。「完成見本」が連動しない場合は、この地図を少し動かしてください。
線を描く場合はポイントをクリックして行ってください。
     
 *「消す」をクリックした後、地図を少し動かすと生成した地図からマーカーなどが消えます。
 *マーカーを非表示にすると、[作業3]でのAPI keyの出力ができなくなります。別途入力する必要がありますのでご注意ください。
 作業    ▲作業 [1]へ▲  ▼作業[3]へ▼
地図の大きさ、マーカーの大きさ・色・アルファベットの種類、線の色・太さなどを決めてください。マーカーをそのままにして中心点を変えたい場合は上の地図を動かしてください。
地 図 幅: (最大値:640) 高さ: (最大値:640)
マーカー サイズ: 色: アルファベット/数字:
色: 透過度: 太さ:
《完成見本》
 作業    ▲作業 [1]へ▲  ▲作業 [2]へ▲
《Google Maps API key 入力》ご自身で取得したAPI キー を入力してください。 
Google Maps API key を入力してください
 *マーカーを非表示にすると、API key の出力ができません。下のコード内の「undefined」となっている部分にご自身で入力してください。
《URL出力》下記コードをコピーし、携帯ページなどのコードに貼り付けます。
 コードの一番後ろに表示される「sensor=true_OR_false」は、「true」か「false」のどちらかを選びます。ユーザーの場所、または使用装置を特定するために「センサー」(GPS装置など) を使用している場合は、「sensor=true」に、アプリケーションがセンサーを使用していない場合は、「sensor=false」とします。GPS装置などを使っていない場合や一般的なパソコン用の地図では「sensor=false」としてください。
 「sensor」は必須です。

 *コード内で「key=undefined」となっている場合、「undefined」の部分をご自身の APIキー に置き換えてください。
《携帯サイトなどで利用》
 携帯サイトなどで利用するには、上記で取得したコードを、<img> タグでページに貼り付けます。
 【例】 <img src="https://maps-api-ssl.google.com/staticmap?
     center=35.658587,139.745428
     &markers=35.658587,139.745428,reda
     &zoom=13&size=240x320&key=APIキー&sensor=false">
    *取得したコードは一行で書きます。

 *コード内で「key=undefined」となっている場合、「undefined」の部分をご自身の APIキー に置き換えてください。
 *「sensor=true_OR_false」は、どちらかの設定にご自身で書き換えててください。
《複数のマーカーを表示》
 複数のマーカーを表示することができます。こちらのサイトから別途、緯度・経度を取得し、上記ソースに書き足します。それぞれの緯度経度を、| (パイプ、%7C )で区切ります。マーカーの色(red,blue,greenなど)、マーカーの文字(a-z)を指定できます。
 【例】上記に2つ書き足した例
       &markers=35.658587,139.745428,reda
     %7C35.655622,139.756908,blueb
     %7C35.660365,139.729958,blackc
    *コードは一行で書きます。
    *色名[red,blue,black など]の後ろに付いている「a,b,c」がマーカーの文字です。
= 使い方のヒント =
Google Mapsを利用して、マーカーなどを付けた地図画像を作ることができます。
この Google Static Maps API は、JavaScriptというスクリプトを使用しないため、通常のGoogleマップと違って、JavaScriptが動作しないような環境でも地図を表示させることができます。JavaScript が使えなかったり、動作が遅かったりする携帯電話などでも画像として地図を表示させることができます。
JavaScriptを使う場合は、最低でも下記のようなコードを書く必要がありますが、この Google Static Maps API では、一行のコードで地図を表示することができます。

<script src="https://maps.google.jp/maps?file=api&v=2&key=ご自分のAPI key"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(35.65861, 139.745447);
map.setCenter(point, 13);
map.setMapType(G_NORMAL_MAP);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>

<body>
<div id="map" style="width: 240px; height: 320px"></div>
</body>

地図の大きさや、マーカーの種類・色・表示するアルファベット、ルートを示す線の色・透過度・太さなどを設定できます。
《URL出力》このプログラムで生成したコードをコピーし、「key=」の部分にご自身で取得したAPI キー をつけ加えると、携帯サイトなどで表示することができます。ただし、このコードで表示させた地図は、移動したりズームしたりすることはできません。
《携帯サイトなどで利用》携帯サイトなどに埋め込んで利用するには、取得したコードを、<img> タグでページに貼り付けます。
 【例】<img src="https://maps-api-ssl.google.com/staticmap?
    center=35.658587,139.745428
    &markers=35.658587,139.745428,reda
    &zoom=13&size=200x200&key= API キー &sensor=false">
  *一行で書きます。
《複数のマーカーを表示》複数のマーカーを表示することができます。こちらのサイトから別途、緯度・経度を取得し、上記ソースに書き足します。それぞれの緯度経度を、| (パイプ、%7C )で区切ります。マーカーの色(red,blue,greenなど)、マーカーの文字(a-z)を指定できます。
 【例】上記に2つ書き足した例
       &markers=35.658587,139.745428,reda
     %7C35.655622,139.756908,blueb
     %7C35.660365,139.729958,blackc
  *一行で書きます。
  *色名[red,blue,black など]の後ろに付いている「a,b,c」がマーカーの文字です。

おすすめサイト・関連サイト…

Last updated : 2019/05/16