Google Maps API v3を入れてみる

「新館」の「ザ・公園」では、公園の場所をGoogle Mapsを使って地図で表示する、ということを行っています。これを初めて導入したときのことは、ここで書きました。ある日、うまく機能しなくなったので、もしやAPIが変わった?と思ってGoogle Mapsのサイトを訪れましたら、v3(バージョン3)が公開されているということではないですか。これはv3のせいだと勝手に思い込み、v3を導入しなければ!と勝手に動いたのでした。

  • v3自体は昨年からあります。
  • v2も今まで通りに使えます。

動かなくなったのは、ちょっとした修正をした際の私のミスなので、そのミスを直せばわざわざv3にする必要はないのですが、乗りかかった船ということで、v3用にコードを変更してしまいました。

v3にするメリットとは、まずはアプリケーション・キーが不要になるということでしょう。v2の際は、Webサイトのドメインに応じたアプリケーション・キーが必要でしたが、これが不要になるのです。ドメインごとにキーを変えたり、といった管理が不要になります。

さらに、コーディングがシンプルになっているらしいです。単に地図を出すだけなら、それほど多くのコードを必要とするわけではないので、あまりメリットは感じられないかも知れませんが、とにかくそういうことらしいです。複数のメソッド呼び出しを、リストを使ってシンプルにまとめられる、というところでしょうか。

では、同じことをしているv2とv3のコードを見てみましょう。

//v2 code
var mapdiv = $get('maps');
if (mapdiv != null) {
    var map = new GMap2(mapdiv);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.clearOverlays();
    Park.GetParkInfo(location.pathname,
        function(result) {
            var pnt = new GLatLng(result.AxisX, result.AxisY);
            var mrk = new GMarker(pnt);
            map.addOverlay(mrk);
            map.setCenter(pnt, 12);
            map.setMapType(G_NORMAL_MAP);
            var msg = result.Title;
            GEvent.addListener(mrk, 'click',
                function() { mrk.openInfoWindowHtml(msg); }
            );
        }
    )
}

//v3 code
var mapdiv = $get('maps');
if (mapdiv != null) {
    Park.GetParkInfo(location.pathname,
        function(result) {
            var myLatlng = new google.maps.LatLng(result.AxisX, result.AxisY);
            var myOptions = {
                zoom: 12,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true
            };
            var map = new google.maps.Map(mapdiv, myOptions);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: result.Title
            });
            var msg = result.Title;
            var infowindow = new google.maps.InfoWindow({
                content: msg,
                size: new google.maps.Size(100, 100)
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        }
    )
}

コード自体は、v2の方が短くて済むのですが、どういうメソッドをどういう順番で呼ぶのか、そのへんの見通しが悪いです。v3の方は、パラメータをまとめたリストを作り、これをメソッドに渡すというように、見通しがよくなっています。

なお、Park.GetParkInfo()はWebサービスです。引数に何かの名前を渡すと、resultに名称(Title)や緯度経度(AxisX, AxisY)を返すものと思って下さい。これを押さえておけば、以上のコードは簡単に読めるでしょう。

ちなみに、v2のときにはGBrowserIsCompatibleメソッドでブラウザの互換性をチェックして、互換性のない場合にははじくということをやっていましたが、v3ではこのメソッドがありません。google.maps名前空間へメソッドがまとめられたので、BrowserIsCompatibleメソッドがあるかと思いましたが、Google Maps APIリファレンスを見ても存在しないようです。

コメント