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

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

マーカーの表示を簡易に記述できる

　マップにマーカーを設定する場合は、markersパラメータをリスト5のように設定します。

リスト5　マーカーの設定（005_gmap3_3.html）

markers: [
    {
        latitude: 43.06255844743664,
        longitude: 141.35365694760856,
        title: "札幌時計台",
        content: "<div><h4>札幌時計台</h4><p>意外としょぼい</p></div>"
    },
    {
        address: "北海道札幌市中央区北3条西6丁目",
        title: "北海道庁",
        icon: "img/icon_star.png",
        content: "<div><h4>北海道庁</h4><p>いわゆる赤レンガです</p></div>",
        openInfo: true
    }
]

　マーカーに指定できるパラメータは表2のとおりです。addressとlatitude／longitudeはどちらかを必ず指定する必要があります（両方を指定するとaddressが優先）。

表2　マーカーに指定できるパラメータ

パラメータ名	内容	初期値
address	表示する住所・地名など	なし（指定必須）
latitude	緯度	なし（指定必須）
longitude	経度	なし（指定必須）
title	タイトル	空文字
content	吹き出し内のHTML要素	空文字（吹き出しなし）
icon	アイコン画像ファイル	指定なし（デフォルトアイコン）
openInfo	吹き出しを自動で開く	false

　リスト5の指定を行うと、図3のように地図にマーカーが表示されます。

図3　マーカーが表示される（005_gmap3_3.html）

　動的にマーカーを追加する場合はaddMarkerメソッド、マーカーを全て削除する場合はremoveAllMarkersメソッドが利用できます。

リスト6　マーカーの追加と削除（005_gmap3_3.html）

// マーカーの追加
$("#markerAdd").click(function(){
    $.gmap3.addMarker($("#gmap3_1"), {
          latitude: 43.060975033796325,
          longitude: 141.35523945092734,
          title: "大通公園",
          content: "<div><h4>大通公園</h4><p>道民憩いの場</p></div>"
    });
});
// マーカーの削除
$("#markerClear").click(function(){
    $.gmap3.removeAllMarkers($("#gmap3_1"));
});

　なおリスト5、リスト6と同じことをプラグインなしで実現するコードをサンプルコード（006_nogmap3_3.html）に添付しています。リスト5に相当する内容はリスト7のようになり、ジオコーディングサービスやマーカーに表示するInfoWindow（吹き出し）、マウスクリックのイベント処理を自分で実装する必要があります。

リスト7　リスト5と等価なプラグインなしの実装（006_nogmap3_3.html）

// markerを追加
var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(43.06255844743664, 141.35365694760856),
    map: map,
    title: "札幌時計台"
});
// markerに表示するInfoWindow（吹き出し）
var infoWindow1 = new google.maps.InfoWindow({
    content: "<div><h4>札幌時計台</h4><p>意外としょぼい</p></div>"
});
// markerクリック時に吹き出しを表示
google.maps.event.addListener(marker1, "click", function() {
    infoWindow1.open(map, marker1);
});
// markerを配列に保持
arrayMarkers.push(marker1);

// 2個めのmarkerはgeocoderを用いて住所から緯度・経度を取得
geocoder.geocode({address:"北海道札幌市中央区北3条西6丁目"}, function(results,status) {
    var location = results[0].geometry.location;
    var marker2 = new google.maps.Marker({
        position: location,
        map: map,
        title: "北海道庁",
        icon: "img/icon_star.png",
    });
    var infoWindow2 = new google.maps.InfoWindow({
        content: "<div><h4>北海道庁</h4><p>いわゆる赤レンガです</p></div>"
    });
    google.maps.event.addListener(marker2, "click", function() {
        infoWindow2.open(map, marker2);
    });
    google.maps.event.trigger(marker2, "click");

    arrayMarkers.push(marker2);
});