Google Maps v2を設置する(1)



以前、Google Mapsをカスタマイズして自分のページへ設置するための解説を、 Google Mapsを自サイトに設置する Google Mapsを自サイトに設置する2 などで行いましたが、それらは、Google Maps API のバージョン1(v1)についてのものでした。

しかし、現在、Google Maps APIでデフォルトで動作しているバージョンはv2になっています。 v2になり、APIには、多くのクラスやメソッドが追加されるとともに、 JavaScriptファイルのサイズもおよそ半分になり、 メモリリークの回避策や手軽なデバッグログ用クラスなども追加され、v1よりも格段に便利になってきています。

現状(2006.8.15現在)v1もバージョンを明示することで 今まで通り動作はしていますが、v2になって追加された豊富な機能を利用することはできません。 また、v1については、アップデートはv1.31で停止しており、将来のサポートも不明です。

そこで、今回から、Google Maps API のバージョン2(v2)についての使い方を順次みていこうと思います。

今回のポイントは、v1からv2へ移行する際の注意点の基本的な部分です。

v2のドキュメントは下記にあります。
Google Maps API Version 2 Documentation

v2へのアップデートについての公式な注意書きは下記にあります。
Google Maps API Version 2 Upgrade Guide

v2に対応するリファレンスの、拙訳とサンプルが、下記にあります(拙著『入門Ajax』の追加サポートページです)。
Version 2 Class Reference (意訳とサンプル)

Google Mapsの設置方法自体はv1とほとんど変りませんのでは、下記の記事などもご参照下さい。
Google Maps 設置までの流れ


URLへバージョンを表記する


Google Maps APIのバージョンはAPIをリクエストするURLクエリへパラメータの一つとして指定します。 その部分を、もう一度見てみましょう。まず、v1の場合です。
<script src="http://maps.google.com/maps?file=api&v=1&key=自分のキー...
APIをリクエストするscript要素のURLに、v=1という場所がありますね。これが、バージョン1を表しています。 Google Maps APIでは、ここを、v=2 や v=2.x とすれば、APIのバージョン2が動作し、 &v=2.58とすれば、マイナーバージョンである2.58が動作する仕組みになっています。

たとえば、v2では、次のように記述します。
<script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー...
このバージョンが仮に次のv3へ移行する時には、最低1ヶ月程度の告知期間を経てデフォルトのバージョンが移行します。 ただし、現状ではv=1などと明記すれば、そのバージョンで動作しますので、おそらくは、 推測ですが、今後も同様の対応が取られるのではないかと 思われます。2006.8現在、v=1を指定したときの デフォルトバージョンは、v1.31で、v2移行後はアップデートされていません。

APIのバージョン履歴などは、下記が参考になります。
GoogleMapki Changelog
Google Mapks 公式ブログ

地図クラスがGMapからGMap2へ


地図のインスタンスは、 v1では、たとえば、
var map = new GMap(document.getElementById("map"));
のように書きましたが、 v2では、
var map = new GMap2(document.getElementById("map"));
つまり、GMapクラスがGMap2クラスに変ります

centerAndZoomからsetCenterへ


v1で頻繁に利用されていたcenterAndZoomが無くなり、代わりにsetCenterというメソッドが追加されました。 これは、地理的座標を表現する方法が変更された事に伴う改変です。

v1では、GPointで地理的座標、つまり経緯度を扱っていましたが、v2として書く場合には、GLatLngを使う仕様に変りました。 setCenterは、このGLatLngのインスタンスを引数に利用してセンター座標をセットするためのメソッドとして追加されています。 たとえば、次のように記述します。
map.setCenter(new GLatLng(35.6587,139.7454), 17);
このとき、GPointとGLatLngでは、引数の経緯度の順序が逆になることに注意が必要です。 たとえば、 new GPoint(139.7454,35.6587);と書いていたものは、 new GLatLng(35.6587,139.7454); と書きます。

また、Zoom値は小さくなるほど広域になるように変更されました。 旧ズーム値との変換は、つぎのような式で計算できます。
newZoom = 17 - oldZoom 
これらの変更点をまとめると、
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.7454, 35.6587), 0);   
こう書いていたものは、
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.6587,139.7454), 17);
このように記述するようになるわけです。

以上をふまえた簡単なサンプルです。
サンプル


次回は、自分のブログやホームページにGoogle Mapsを貼込む際のテクニックを紹介します。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。