home3 shocked wordpress2

Google Maps

Google Maps API で複数マーカーをつける

まずは一つのマップキャンバス上に複数のマーカーをつけます。
参考にしたサイトはこちら。
配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する

function initialize(){
  var myOptions = {
    zoom: 16,   // 任意のズーム率
    center: new google.maps.LatLng(緯度, 経度),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("マップ領域のID名"), myOptions);
  var markers = [
    ['○○○○○', 緯度, 経度],
    ['□□□□□', 緯度, 経度]
  ];

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i][0];
    var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
    createMarker(name,latlng,map)
  }
}

function createMarker(name,latlng,map){
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
}

参考サイトの後継エントリーで、オリジナルのマーカーを使用する場合も投稿されています。
配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する(その2)
今回、マーカー画像の名前は連番ではなく、任意のファイル名を使用しているので、
ちょっと書き換えました。
まずは、markersの配列の3番目に、画像パスも追加して記述します。

var markers = [
  ['○○○○○', 緯度, 経度, '画像のパス'],
  ['□□□□□', 緯度, 経度, '画像のパス']
];

ループの部分にiconsを追加して、markersの3番目の値を取得します。
あとは参考サイトと同様に、createMarker、new google.maps.Markerに引数iconsを追加します。

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i][0];
    var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
    var icons = markers[i][3];
    createMarker(name,latlng,icons,map)
  }
};

function createMarker(name,latlng,icons,map){
  var marker = new google.maps.Marker({
  position: latlng,
  icon:icons,
  map: map
  });
}

DEMO PAGE