まずは一つのマップキャンバス上に複数のマーカーをつけます。
参考にしたサイトはこちら。
配列を使用して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 }); }