※「v1タイプ」のサービス・サポートは終了しているようです。 [2016/01]
|
Google Mapsを利用して、マーカーなどを付けた地図画像を作ることができます。
作業 ![]() |
|||||||||||||
|
作業 ![]() |
・地図の大きさ、マーカーの大きさ・色・アルファベットの種類、線の色・太さなどを決めてください。 ・マーカーをそのままにして中心点を変えたい場合は上の地図を動かしてください。 |
作業 ![]() |
《携帯サイトなどでで利用》 携帯サイトなどで利用するには、上記で取得したコードを、<img> タグでページに貼り付けます。 【例】<img src="https://maps-api-ssl.google.com/maps/api/staticmap? center=35.658610,139.745447&zoom=13&markers= color:red|35.658610,139.745447&size=240x320&sensor=false"> *取得したコードは一行で書きます。 *「sensor=true_OR_false」は、どちらかの設定にご自身で書き換えててください。 ※バージョン1では、API key を取得しコードに記述する必要がありましたが、今回のプログラムで使用している バージョン2 からは、2010年2月からその必要がなくなりました。 |
《複数のマーカーの色や文字を変えて表示する》 《3地点を、赤いマーカーでアルファベットをAにして取得したコード》 https://maps-api-ssl.google.com/maps/api/staticmap?center=35.671382,139.754505&zoom=13 &markers=color:red|label:A|35.658610,139.745447|35.681382,139.766084 |35.675888,139.744858&size=240x320&sensor=false 《上記のコードを基に、赤でA、青でB、黄でCのマーカーに書き換えた例》 https://maps-api-ssl.google.com/maps/api/staticmap?center=35.671382,139.754505&zoom=13 &markers=color:red|label:A|35.658610,139.745447|&markers=color:blue|label:B |35.681382,139.766084|&markers=color:yellow|label:C|35.675888,139.744858 &size=240x320&sensor=false *コードは一行で書きます。 ※書き換えた後に、コードをアドレスバーに貼り付けて、意図した表記かどうかを確かめてください。 ※区切りの「 | 」はパイプという記号です。文字化けするような場合は「 %7C 」と書いてください。 |
|
|||
・ | Google Mapsを利用して、マーカーなどを付けた地図画像を作ることができます。 | ||
・ | 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" |
||
・ | 地図の大きさや、マーカーの種類・色・表示するアルファベット、ルートを示す線の色・透過度・太さなどを設定できます。 | ||
・ | 《URL出力》 このプログラムで生成したコードをコピーし、携帯サイトやWebページに貼り付けて地図画像を表示することができます。ただし、このコードで表示させた地図は、移動したりズームしたりすることはできません。 |
||
・ | 《APIキーについて》 このプログラムでは「APIキー」を必要としません。「バージョン1」では「API key」を別途取得しコードの中に付け加える必要がありましたが、今回のプログラムで使用している「バージョン2」では、2010年2月からその必要がなくなりました。 |
||
・ | 《携帯サイトなどで利用》 携帯サイトなどで利用するには、取得したコードを、<img> タグでページに貼り付けます。 【例】<img src="https://maps-api-ssl.google.com/maps/api/staticmap? center=35.658610,139.745447&zoom=13 &markers=color:red|35.658610,139.745447 &size=240x320&sensor=false"> *一行で書きます。 |
||
・ | 《複数のマーカーを表示》 複数のマーカーを表示し、それぞれの色を変えたり、中の文字を変えたりすることができます。ページ内の説明をお読みください。 |