ここではGoogle Maps API V3のMarkerを複数作成する方法について解説しています。
※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/

デモはこちら
https://office-goto.info/demo/marker-plurality/
サンプルソース
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(35.671277, 139.718489);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), options);
var arrData = new Array();
arrData[0] = new google.maps.LatLng(35.671277, 139.718489);
arrData[1] = new google.maps.LatLng(35.66991, 139.715291);
// Markerオブジェクト複数
for (i = 0; i < arrData.length; i++) {
var marker = new google.maps.Marker({
position: arrData[i],
map: map,
title: "ツールチップ" + (i + 1),
icon: "icon.png"
});
}
});
Google Maps API V3 Markerオブジェクトで解説したMarkerオブジェクトをfor文で回すだけで複数作成されます。
