マーカーの表示を簡易に記述できる
マップにマーカーを設定する場合は、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が優先）。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| 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);
});
