Google Maps JavaScript API V2の簡単なまとめ : JavaScript
Google Maps JavaScript API V2を使ってGoogle Mapsを表示するメモ。
2011.04.26 本記事の説明はGoogle Maps JavaScript API V2を対象にしている。最新版はGoogle Maps JavaScript API V3。
このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。
Google Maps設置の流れ
Google Maps API Keyの取得
Google Maps API ファミリー – Google Code
» http://www.google.com/apis/maps/
Google Maps API Keyを取得するにはGoogleアカウントとサイトURLが必要なとなる。
上記サイトで取得したGoogle Maps API keyまたはGoogle Maps API Keyが埋め込まれたJavaScript Maps API Exampleのコードを保存する。
Google Mapsを利用するHTMLの文字コードはUTF-8がよい*。
表示座標(緯度•経度)を取得
下記サイトで緯度•経度を調べることができる。
»Geocoding
JavaScriptの変更
目的に合わせてJavaScriptを記載する。
JavaScriptコードの簡単なサンプル
JavaScript Maps API Example
JavaScript Maps API Exampleのサンプル画面では次のようなコードが表示される。
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=yourkey" type="text/javascript"></script</>
yourkeyには取得したGoogle Maps API Keyが設定されている。
JavaScript Maps API Exampleの変更
&sensor=true_or_falseを 削除する。この記述を削除しないと地図が表示されなかった。
<script src="http://maps.google.com/maps?file=api&v=2 &key=yourkey" type="text/javascript"></script>
地図を表示する簡単なサンプル
<head> ・・・・・・・・・・・・・・・ <script src="http://maps.google.com/maps?file=api&v=2&key=yourkey" type="text/javascript"charset="utf-8"><script/>; ・・・・・・・・・・・・・・・ </head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript">
//<![CDATA[
//マーカー座標設定 緯度, 経度
var point=new GLatLng(緯度,経度);
// 地図オブジェクト取得
var map=new GMap2(document.getElementById("map"));
// 地図タイプ切替コントロール
map.addControl(new GMapTypeControl());
// 縮尺・移動コントロール
map.addControl(new GSmallMapControl());
// 中心を設定 今回は中心=マーカー座標
map.setCenter(point, 縮尺);
//マーカーを立てる
var marker=new GMarker(point);
map.addOverlay(marker);
//吹き出し(初期状態で表示)
marker.openInfoWindowHtml("吹き出し");
//クリックイベント
GEvent.addListener(marker,"click",openInfo)
//クリックイベントコールバック関数
function openInfo () {
marker.openInfoWindowHtml("吹き出し");
}
//]]>
</script>
</body>
APIを読み込むHTMLファイルの文字コードがUTF-8ではない場合は、scriptタグのcharset属性にutf-8を指定する。
*その他にFlash用、HTML用のサンプルがある。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。