• 小
  • 中
  • 大

マーカーをまとめて追加

地図に複数のマーカを表示し、マーカにクリックイベントを追加して情報窓を表示。
マーカの情報を配列で用意(東京駅・大手町の座標データ)

 var data = new Array(); 
data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅'});

マーカを複数作成
 var markers = new Array(); 
//マーカの作成
for (i = 0; i < data.length; i++) {
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng
(data[i].lat, data[i].lng), map: map
});
dispInfo(markers[i],data[i].name);
}

for文でdata格納を廻して、マーカを生成し、クリックイベントを追加します。

サンプルコード


サンプル.js


function initialize() {
//緯度と経度の配列
var data = new Array();
data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅'});

var myLatlng = new google.maps.LatLng(data[0].lat, data[0].lng);
var opts = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),opts);

var markers = new Array();
//マーカの作成
for (i = 0; i < data.length; i++) {
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: map
});
dispInfo(markers[i],data[i].name);
}
}

function dispInfo(marker,name) {
google.maps.event.addListener(marker, 'click',
function(event) {
new google.maps.InfoWindow
({content:name}).open(marker.getMap(), marker);
});
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 マーカーをまとめて追加


Google Maps サンプル > マーカーをまとめて追加