Google Map API v3を使ってみる

JavaScript

twicliのgeomap.jsプラグインで、GoogleMapの埋め込み表示に使っているスクリプトの中身。
といってもGoogle Map APIを呼んでるだけで至極簡単ですが。


まずGoogle Map API (v3)を読み込む。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

sensor=false となっているのは、クライアント機器の位置情報センサ（GPS、WLANなど）を使用しない、という意味です。sensor=true とすると、対応機器では位置情報取得が行えるようになります。


DIV要素(id指定あり)を用意し、その中に地図を表示する。latが緯度、lngが経度になります。

<div id="map_canvas" style="width: 100%; height: 300px"></div>

<script>
		var lat = 35.00, lng = 135.00;
		var latlng = new google.maps.LatLng(lat, lng);
		var map = new google.maps.Map(document.getElementById("map_canvas"), {
			zoom: 13,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

zoomは縮尺(数値が大きいほど詳細)、mapTypeIdは地図の種類で、ROADMAP(道路地図)のほか、SATELLITE(衛星写真)、HYBRID(地図+衛星写真)、TERRAIN(地形図) が使えます。

ついでに指定した座標にマーカを表示してみる。(scriptの続き)

		var marker = new google.maps.Marker({
			position: latlng,
			map: map
		});
</script>

なお引数ハッシュのmapには上記で作った地図を指すローカル変数を指定しています。


これだけで以下のような地図が表示されます。

簡単ですね。

参考サイト

Google Maps API Version3 チュートリアル - Google Maps API Version3 日本語ドキュメント(非公式)
http://code.google.com/intl/ja/apis/maps/documentation/javascript/