Googleマップを手軽に利用する定番プラグイン「gmap3」

「jQuery プラグイン」の利用（25）

地図の移動も地名指定が便利

　プログラムで任意の地点へ地図を移動させるにはpanToメソッドを使用します。緯度・経度による指定と地名による指定の両方が可能です。

リスト8　任意地点へ移動させる処理（007_gmap3_4.html）

// 緯度・経度による移動
$("#button1").click(function(){
    $.gmap3.panTo($("#gmap3_1"), {latitude:$("#lat").val(), longitude:$("#lng").val()});
});
// 地名による移動
$("#button2").click(function(){
    $.gmap3.panTo($("#gmap3_1"), {address:$("#addr").val()});
});

　リスト8を実行すると、緯度／経度または地名で指定された地点が中心になるよう移動させることができます。

図4　地名「はこだて」を指定して函館を中央に表示させる（007_gmap3_4.html）

　リスト8をプラグインなしで記述するとリスト9のようになります。緯度・経度を指定する場合は実装に大差ありませんが、地名を指定する場合はやはりジオコーディングサービスの実装が必要になっています。

リスト9　プラグインなしで任意地点へ移動させる処理（008_nogmap3_4.html）

// 緯度・経度による移動
$("#button1").click(function(){
    map.panTo(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
});
// 地名による移動
$("#button2").click(function(){
    // Geocoderで地名から緯度・経度を取得してその位置に移動
    geocoder.geocode({address:$("#addr").val()}, function(results, status) {
        var location = results[0].geometry.location;
        map.panTo(location);
    });
});

まとめ

　本記事では、Googleマップを簡易に表示するjquery.gmap3プラグインを紹介しました。Google Maps API V3を直接使用する場合と比べて、特に地名で場所を指定する場合や、マーカーの表示を行う場合に、より少ないコード量で簡易に記述することができます。一方でストリートビューなどGoogleマップの全機能を利用することはできないので、地図とマーカー程度の簡易な地図表示を行いたいときに利用するとよいでしょう。

参考資料

• jquery.gmap3