マーカーの表示を簡易に記述できる
マップにマーカーを設定する場合は、markersパラメータをリスト5のように設定します。
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が優先)。
パラメータ名 | 内容 | 初期値 |
---|---|---|
address | 表示する住所・地名など | なし(指定必須) |
latitude | 緯度 | なし(指定必須) |
longitude | 経度 | なし(指定必須) |
title | タイトル | 空文字 |
content | 吹き出し内のHTML要素 | 空文字(吹き出しなし) |
icon | アイコン画像ファイル | 指定なし(デフォルトアイコン) |
openInfo | 吹き出しを自動で開く | false |
リスト5の指定を行うと、図3のように地図にマーカーが表示されます。
動的にマーカーを追加する場合はaddMarkerメソッド、マーカーを全て削除する場合はremoveAllMarkersメソッドが利用できます。
// マーカーの追加 $("#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(吹き出し)、マウスクリックのイベント処理を自分で実装する必要があります。
// 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); });