Google Maps JavaScript API V2の簡単なまとめ : JavaScript

Pocket

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&amp;v=2&amp;sensor=true_or_false&amp;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&amp;v=2 &amp;key=yourkey" type="text/javascript"></script>

地図を表示する簡単なサンプル

<head>
	・・・・・・・・・・・・・・・
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=yourkey" type="text/javascript"charset="utf-8"><script/>;
	・・・・・・・・・・・・・・・
</head>
<body>
	<div id="map" style="width:500px;height:400px;"></div>
	<script type="text/javascript">
	//<!&#91;CDATA&#91;
		//マーカー座標設定  緯度, 経度
		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("吹き出し");
		}
	//&#93;&#93;>
	</script>
</body>

APIを読み込むHTMLファイルの文字コードがUTF-8ではない場合は、scriptタグのcharset属性にutf-8を指定する。

*その他にFlash用、HTML用のサンプルがある。

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。