JavaScript API バージョン2からバージョン3への移行(簡易版)

去る2013年11月19日。Javascript API のバージョン2が逝去されました。
数年前のコンテンツで地図を表示していたサイトでは、急に地図が表示されなくなったところも少なく無いと思います。 (ボクにも数件連絡ありましたしね)

GoogleMapsを使って、会社案内ページの地図を表示させるなんてのは、Webの制作においては基本の基本だと思ってたんですが、意外とそうでもないのかも?と思ったので、V2とV3のソースを見比べながら移行できるようにしましょう!ってのが今回のコンセプト。


上の地図が、おそらく1番多いパターンじゃないでしょうかね?
地図があって、マーカーを表示して、そこに社名と住所・電話番号を掲載ってパターン。
これのソースがだいたいこんな感じだと思います。

まずはscriptタグで、Maps API JavaScript を呼び出します。V2ではデベロッパー登録を行って得られるAPIキーが必要でしたが、V3では不要です。公式ドキュメントでは「必要」とありますが、別に無くても表示できます。90日連続で25,000PVを超える地図ページを表示する場合には素直にAPIキーを取得しましょう。

旧V2でのMaps API JavaScript を呼び出し

<script type="text/javascript" src="http://maps.google.co.jp/maps?hl=ja&file=api&v=2&key=ABCDEFGHIJKLMNOPQRSTUVWXYZ"></script>

V3でのMaps API JavaScript を呼び出し

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

通常、sensorというパラメータはfalseで構いません。 これをtrueにすると、位置情報取得を取得するためのセンサーが利用できますが、Webに地図を掲載するレベルでは関係ありません。

ちなみに、SSL配下(http://)のページから呼び出す場合は、以下に置き換えてください。

<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false"></script>

次にV2では、こんな感じのソースだったと思います。

jQuery(document).ready(function($) {
	var map = new GMap2(document.getElementById("map_canvas"));
	var point = new GLatLng(33.59157832737096, 130.3805878223419);
	map.setCenter(point, 16);
	map.setMapType(G_NORMAL_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
	var mark = new GMarker(point);
	map.addOverlay(mark);
	var html = '<h4>Share Office: 403Forbidden</h4><p>BLDG64 #403, 3-12-12 Otemon, Chuo-ku, Fukuoka 810-0074</p></div>';
	mark.openInfoWindowHtml(html);
	GEvent.addListener(mark, "click", function(){ mark.openInfoWindowHtml(html); });
});

まずは2〜8行目で地図を表示。マップを定義して(2行目)、その後に中心位置やコントロールを設定していましたが、V3からは先に定義して地図を呼び出します。

V3での地図表示

	var myLatlng = new google.maps.LatLng(33.59157832737096, 130.3805878223419);
	var myOptions = {
		zoom: 16,
		center: myLatlng,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

次に9〜10行目でマーカーを追加しました。これは似たような感じです。

V3でのマーカー表示

	var mark = new google.maps.Marker({ position: myLatlng, map: map });

最後に11〜12行目で、インフォウィンドウを設定しましたので、こちらのV3版は、

V3でのインフォウィンドウ表示

	var html = '<div style="width:360px;height:50px;"><h4>Share Office: 403Forbidden</h4><p>BLDG64 #403, 3-12-12 Otemon, Chuo-ku, Fukuoka 810-0074</p></div>';
	var infoWindow = new google.maps.InfoWindow({ content: html });
	infoWindow.open(map, mark);

こんな感じ。なぜだかわからないんだけど、インフォウィンドウの縦横のサイズが不安定です。なので、インフォウィンドウ内の要素にサイズ指定しておくのが吉です。

おまけですが、マーカーのクリックイベントも追加しておきましょう。

V3でのイベントリスナーの追加

	google.maps.event.addListener(mark, 'click', function(event) { infoWindow.open(map, mark); });

一応完了。まとめますと、

V3での地図表示

jQuery(document).ready(function($) {
	var myLatlng = new google.maps.LatLng(33.59157832737096, 130.3805878223419);
	var myOptions = {
		zoom: 16,
		center: myLatlng,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
	var mark = new google.maps.Marker({ position: myLatlng, map: map });
	var html = '<div style="width:360px;height:50px;"><h4>Share Office: 403Forbidden</h4><p>BLDG64 #403, 3-12-12 Otemon, Chuo-ku, Fukuoka 810-0074</p></div>';
	var infoWindow = new google.maps.InfoWindow({ content: html });
	infoWindow.open(map, mark);
	google.maps.event.addListener(mark, 'click', function(event) { infoWindow.open(map, mark); });
});

まぁ1行づつ見比べて、自分のサイトもちゃんと修正してみるといいと思います。

今日はここまで。