１つのマップに複数のマーカーを表示する。
window.onload = function() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById(“map”));
//地図の中心
var point =new GPoint(-122.1419, 37.4419);
map.centerAndZoom(point, 13);
var marks = [
{ id:1, lat:41, lng:-121, text:’sample1′ },
{ id:2, lat:42, lng:-122, text:’sample2′ },
{ id:3, lat:43, lng:-123, text:’sample3′ },
{ id:4, lat:43, lng:-134, text:’sample4′ },
{ id:5, lat:40, lng:-135, text:’sample5′ }
];
function addMarker( mark ) {
var latlng = new GLatLng( mark.lat, mark.lng );
var marker = new GMarker( latlng );
map.addOverlay( marker );
GEvent.addListener( marker, ‘click’, function() {
marker.openInfoWindowHtml( mark.id + ‘: ‘ + mark.text );
});
};
for( var i = 0; i < marks.length; ++i ){
addMarker( marks[i] );
};
}
}
[/js]
var marks=[略]
連想配列オブジェクトを入れた配列markerを作成。
for( var i = 0; i < marks.length; ++i )
for文で配列marksの長さだけ処理を繰り返す。
addMarker( marks[i] );
関数addMarkerを実行
addMarker( mark )
上で呼ばれるユーザ定義関数。引数のmarkにはfor文で繰り返されたmarks[i]が入る。
var latlng = new GLatLng( mark.lat, mark.lng );
GLatLngで座標を指定する。「引数.キー」で連想配列の値にアクセスしている。
marker.openInfoWindowHtml( mark.id + ': ' + mark.text );
情報ウィンドウのコンテンツ。IDとテキストを指定している。