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

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

　本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。前回は世界地図と日本地図を表示するプラグイン2種を取り上げましたが、今回はもっと狭い範囲で特定の場所（地点）の情報を表示するのに便利な、GoogleマップをWebページに表示するjQueryプラグインを取り上げます。

はじめに

　Googleマップに象徴されるように、Webページで地図を表示することは近年一般的に行われています。特に静的な画像ではなくJavaScriptで動的に描画される地図は、利用者がインタラクティブに操作を行って場所の情報を取得できるため、Webページの利便性を高める手段として有用です。

　前回は世界地図を表示するjQuery Vector Maps（JQVMap）と、日本地図を表示するJapan Mapの、2種類のjQueryプラグインを取り上げました。これらは国・地域や都道府県といった単位で利用者に情報を表示したり、利用者に選択させたりする用途に便利に利用できます。

　一方で世界地図や日本地図といった広範囲の地図は、より狭い場所（地点）に着目して情報を表示する用途には向いていません。例えば以下のような用途には道路・建物のレベルで細かく情報を表示できるGoogleマップが便利です。

• Wi-Fiスポットの場所と内容を地図上に表示
• リストから支社を選ぶと地図で場所を表示する会社案内

　そこで今回は、Googleマップを簡易に利用できるjquery.gmap3プラグインを取り上げ、紹介していきます。このプラグインは内部的にGoogleマップを利用するAPI（Google Maps API V3）を利用していますが、プラグインを利用することでよりシンプルにコードを記述することができます。

対象読者

• オススメスポットをインタラクティブな地図で紹介したい方
• Googleマップを使いたいがAPIを意識したくない方

必要な環境

　jQueryには1.x系と2.x系が存在し、2.x系はInternet Explorer 6～8との互換性を切り捨てることでコードサイズを縮小しています。今回は互換性を考慮して1.x系の最新版であるjQuery 1.11.1を使用します。

　今回は以下の環境で動作を確認しています。

• Windows 7 64bit版
  • Internet Explorer 11

地名を指定するときに効果を発揮

　jquery.gmap3は、Googleマップを表示するjQueryプラグインです。GitHubからMITライセンスで配布されています。ダウンロードファイルに含まれるJavaScriptファイル（jquery.gmap3.js）を参照するようHTMLファイルに記述します。

　jquery.gmap3で東京周辺の地図を表示する例をリスト1に示します。

リスト1　jquery.gmap3のシンプルな利用法（001_gmap3_1.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<!-- Google Maps APIの読込 ... （1） -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!-- jQueryの読込 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- gmap3の読込 ... （2） -->
<script type="text/javascript" src="js/gmap3/jquery.gmap3.js"></script>

<script>
    $(function() {
        $("#gmap3_1").gmap3({  // 地図の表示 ... （3）
            latitude: 35.6988,
            longitude: 139.7747,
            zoom: 8,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true
        });
    });
</script>

<title>gmap3サンプル1</title>
</head>
<body>
    <h1>gmap3サンプル1</h1>
    <!-- 地図を表示する要素 ... （4） -->
    <div id="gmap3_1" style="width:640px;height:480px"></div>
</body>
</html>

　まず（1）でGoogle Maps APIのJavaScriptを読み込んだ後、jQueryとプラグイン（2）を読み込みます。地図を表示する要素（4）に対してgmap3メソッドで地図を表示します（3）。

　リスト1を実行するとGoogleマップで東京近辺の地図が表示されます。

図1　jquery.gmap3プラグインでGoogleマップを表示（001_gmap3_1.html）

　gmap3メソッドに指定する主なパラメータを表1に示します。addressとlatitude／longitudeはどちらかを必ず指定する必要があります（両方を指定するとaddressが優先）。

表1　jquery.gmap3の主なパラメータ

パラメータ名	内容	初期値
address	表示する住所・地名など	なし（指定必須）
latitude	緯度	なし（指定必須）
longitude	経度	なし（指定必須）
zoom	縮尺	10
navigationControl	地図の操作部の表示・非表示	true
mapTypeControl	地図タイプ選択部の表示・非表示	true
scaleControl	縮尺の表示・非表示	true

　なおリスト1と同じ内容をjquery.gmap3プラグインを使わないで表示する場合、JavaScript部はリスト2のようになります。

リスト2　jquery.gmap3を使わずにリスト1と同じ地図を表示（002_nogmaps3_1.html）

$(function() {
    // 地図を表示するオプション設定
    var options = {
        center: new google.maps.LatLng(35.6988, 139.7747),
        zoom: 8,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true
    };
    // 地図を表示
    var map = new google.maps.Map($("#gmap3_1").get(0), options);
});

　リスト1やリスト2のように緯度・経度を直接指定する場合はプラグインの有無によりコード量に大きな違いがありませんが、緯度・経度の代わりに住所・地名を指定する場合は、住所・地名から緯度・経度を求める処理をjquery.jmap3プラグインが自動的に行うため、コードがよりシンプルになります。

　リスト3は地名「大阪」を指定してjquery.gmap3で地図を表示するコードです。

リスト3　jquery.gmap3を使って大阪の地図を表示（003_gmap3_2.html）

$(function() {
    $("#gmap3_1").gmap3({
        address: "大阪",
        zoom: 8,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true
    });
});

図2　jquery.gmap3プラグインで地名「大阪」を指定した例（003_gmap3_2.html）

　リスト3・図2と同じ表示をプラグインなしで実装すると、リスト4のように住所・地名から緯度・経度を求める処理をGoogle Maps APIのジオコーディングサービスで明示的に行う必要があり、コード量が増えてしまいます。

リスト4　jquery.gmap3を使わずに大阪の地図を表示（004_nogmaps3_2.html）

$(function() {
    // Geocoderで大阪の緯度・経度を取得
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address:"大阪"}, function(results, status) {
        var location = results[0].geometry.location; // 取得できた緯度・経度
        var options = {
            center: location, // 取得できた緯度・経度を中央に設定
            zoom: 8,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true
        };
        // 地図を表示
        var map = new google.maps.Map($("#gmap3_1").get(0), options);
    });
});