GoogleMapSample8:複数のマーカーを表示

1つのマップに複数のマーカーを表示する。

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とテキストを指定している。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください