Google Maps API　version3入門

Google Maps APIのバージョン３が公開されています。
これまで、Google Mapsを利用したWebアプリはバージョン２を使っていましたが、今回、バージョン３が公開されたことで、チャレンジしてみようと思いました。

本サイトでもバージョン３への移行を奨励しています。
Google Maps JavaScript API V3
また、Google Mapsではストリートビューの強化や賃貸情報の追加など、日々その便利性は高まっており、その恩恵を受けるためにもバージョン３を習得するのは必須かなと考えました。

ただ、いかんせん、これまでのバージョン２との互換性はまったくなく、バージョンアップ移行が簡単ではないという点と、バージョン３の日本語マニュアルページがないというところがハードルです。

今回は、バージョン２との違いも含め、基本的な利用方法を見ていきます。

導入にあたりjsを読み込むだけ

バージョン２を利用するにはAPIキーが必要でしたが、バージョン３では必要ありません。公開されているJavaScriptを読み込むだけです。

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

パラメータ「sensor」は携帯端末用にGPSなどのセンサー機器を備えている場合にtrueにします。ここでは通常のPC版を想定しているので、falseにしておきます。

マップを表示するエリアを用意

html側でマップを表示するエリアを用意しておきます。例えば400×400のエリアを用意します。

<div id="googlemaps" style="width:400px; height:400px"></div>

JavaScriptを実行しAPIを呼ぶ

ウィンドウの起票時に以下のJavaScriptを実行すると地図が表示されるはずです。

var latlng = new google.maps.LatLng(36, 135);
var myOptions = {
	zoom: 4,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googlemaps"), myOptions);

北緯35度、東経135度でズームは4に、標準のブラウザサイズで日本本土全体が見える設定になっているはずです。

これからいろいろ試してみたいと思います。