【Javascript】Google Maps v2を設置する(1)

Google Maps v2を設置する(1)

---

1: URLへバージョンを表記する
2: 地図クラスがGMapからGMap2へ
3: centerAndZoomからsetCenterへ

以前、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を貼込む際のテクニックを紹介します。