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

地図画像を作り、携帯サイトなどで使う
= with Google Static Maps API v2 =
Google Mapsを利用して、マーカーなどを付けた地図画像を作ることができます。
　このプログラムは、APIキーを必要としない「Google Static Maps API Version2」タイプです。
　このタイプでは、iモードHTMLシミュレータII でシミュレートモードが8でしか画像を表示できないというご指摘のメールをいただきました。8は最新のPCに近い携帯ということになり、通常の携帯をお使いの方はまだまだ多いと思われることから、ご要望にお応えして「Version1タイプ」も掲載することにしました。 [2010/05/09]
　※「Version1タイプ」のサービス・サポートは終了しているようです。 [2016/01]
 作業 　　　▼作業[2]へ▼　　▼作業[3]へ▼
・ 住所,地名,駅名などで検索し、表示する場所を決めてください。複数の地点を検索し、複数のマーカーを表示することができます。表示されたマーカーは摘んで移動し、微調整をすることができます。
 
・場所： 　　
・ ズームレベルを決めます。「完成見本」が連動しない場合は、この地図を少し動かしてください。
・ 線を描く場合は地図上をクリックし、最後はダブルクリックで終了します。
（線が引けない場合があるようです）

 作業 　　　▲作業 [1]へ▲　　▼作業[3]へ▼
・地図の大きさ、マーカーの大きさ・色・アルファベットの種類、線の色・太さなどを決めてください。
・マーカーをそのままにして中心点を変えたい場合は上の地図を動かしてください。
地 図 幅： (最大値:640) 高さ： (最大値:640)
マーカー サイズ： 色： アルファベット/数字：
線 色： 透過度： 太さ：
最適と思われるズーム値・範囲に自動調整する。
取得するコードに、座標(緯度経度)ではなく、検索に使用したキーワードをそのまま表示する。
　　※日本語をコードとして使う場合は、日本語をUTF-8に変換する必要があります。
　　　《例》東京スカイツリー　→
　　%E6%9D%B1%E4%BA%AC%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%84%E3%83%AA%E3%83%BC
　　　　 ≫≫ 「UTF-8変換」にはこちらのツールをお使いください ≫≫
 《完成見本》
 作業 　　　▲作業 [1]へ▲　　▲作業 [2]へ▲
《URL出力》下記コードをコピーし、携帯ページなどのコードに貼り付けます。
　コードの一番後ろに表示される「sensor=true_OR_false」は、「true」か「false」のどちらかを選びます。ユーザーの場所、または使用装置を特定するために「センサー」(GPS装置など) を使用している場合は、「sensor=true」に、アプリケーションがセンサーを使用していない場合は、「sensor=false」とします。GPS装置などを使っていない場合や一般的なパソコン用の地図では「sensor=false」としてください。
　「sensor」は必須です。記入漏れのないようにしてください。
《携帯サイトなどでで利用》
　携帯サイトなどで利用するには、上記で取得したコードを、<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"
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出力》
このプログラムで生成したコードをコピーし、携帯サイトや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">
　　*一行で書きます。
・ 《複数のマーカーを表示》
複数のマーカーを表示し、それぞれの色を変えたり、中の文字を変えたりすることができます。ページ内の説明をお読みください。

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

Last updated : 2019/05/16
© みんなの知識 ちょっと便利帳 -