「TOKYO ART LIFE」のGoogle Maps API V3対応

2009/06/05

「TOKYO ART LIFE」で使用しているGoogle Maps APIのバージョンをV3に変更しました。

V2からV3への主な変更点は以下のとおりです。

APIキーが不要になった

V2
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<APIキー>"></script>
V3
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor={true|false}"></script>

GPSなどの位置情報検知センサーがあるデバイスではsensor=をtrueに、それ以外(PCなど)ではfalseを指定する。

マップの描画方法が簡略化された

従来のようにプロパティを一つ一つ設定していく方法から、各種オプションを一括して設定する方法に変わった。

V2
// マップオブジェクト生成
var map = new GMap2(document.getElementById('map'));
// マップ緯度/経度決定
var point = new GLatLng(<緯度>, <経度>);
// コントロールボックスの描画位置/サイズ決定
var controlPos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));
// ズームコントロールボックス生成
map.addControl(new GSmallZoomControl(), controlPos);
// マップ描画
map.setCenter(point, <ズームレベル>);
V3
// マップオブジェクト生成      
var mapdiv = document.getElementById('map');
// マップオプション設定
var map_option =
{
  center: new google.maps.LatLng(<緯度>, <経度>),
  zoom: <ズームレベル>,
  mapTypeId: google.maps.MapTypeId.ROADMAP   // マップタイプ
};
// マップ描画
map = new google.maps.Map(mapdiv, map_option);

マップタイプは以下のいずれかが指定できる。

ROADMAP

通常の地図

SATELLITE

航空写真

HYBRID

道路地図と航空写真の合成

TERRAIN

地形図

マーカー/情報ウィンドウの描画方法も簡略化された

マップ描画と同様、各種オプションを一括して設定する方法に変わった。

V2
// マーカーアイコンオブジェクト生成
var icon = new GIcon();
// マーカーアイコン画像設定
icon.image = '<画像ファイル>';
// マーカーアイコンサイズ設定
icon.iconSize   = new GSize(32, 32);
// マーカー緯度/経度決定
var movePoint = new GLatLng(toLat, toLon);
// マーカーオブジェクト生成
var marker = new GMarker(movePoint, {icon: icon});
// 情報ウィンドウ描画
map.openInfoWindowHtml(movePoint, <情報ウィンドウ表示文字列>);
// マーカー描画
map.addOverlay(marker);
V3
// マーカーオブジェクト生成
var marker = new google.maps.Marker(
  {
    map: map,
    position: new google.maps.LatLng(<緯度>, <経度>),
    icon: '<マーカーアイコン画像>'
  });
// 情報ウィンドウオブジェクト生成
var popup = new google.maps.InfoWindow(
  {
    content: <情報ウィンドウ表示文字列>
  });
// マーカー/情報ウィンドウ描画
popup.open(map, marker);

clearOverlays()が廃止された

描画済のマーカーや情報ウィンドウなど、マップ上のオブジェクトを削除するメソッドとしてclearOverlays()が用意されていたがV3で廃止された。

V2
map.clearOverlays();
V3

上記に代わる方法として、例えばマーカーや情報ウィンドウのオブジェクトに対して非表示を設定することで同様の処理が可能となる。

// マーカー非表示
marker.set_visible(false);
// 情報ウィンドウを閉じる
popup.close();

(*) これが最善策かは不明なので何か良い方法があればokyuu.comで教えて下さい。

(2009/12/26追記)

Google Maps API V3仕様変更対応(メソッド名変更)

関連情報(Google検索)