WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。


複数マーカーの情報ウィンドウが最後の地点のみオープンする

GoogleMapに複数マーカーを落として、マーカーをクリックすると情報ウィンドウが開くというのをしたいのですけど、どのマーカーをクリックしても一番最後のウィンドウしか開かないんです。

[javascript]
//データを入れる
var data = [
[-34.397,150.644,"marker1.png","タイトル1","バルーン",1],
[-34.882,150.648,"marker2.png","タイトル2","バルーン",2]
];

function initialize()
{

var myOptions = {
zoom: 8,
center: new google.maps.LatLng(data[1][0], data[1][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (var i = 0; i < data.length; i++){

var myLatlng = new google.maps.LatLng(data[i][0], data[i][1]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: data[i][2]
});
var contentString = data[i][3]+
‘<p><a href="#" target="_blank">参照Webサイト</a></p>’;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
}
}
[/javascript]

調べたら同じような問題を解決された方々が…。

forループの中でGevent.addListenerを使う
複数のgoogle.maps.Marker (GMarker) に吹き出しをつける。

ありがとうございます。

ということで、訂正

[javascript]
//データを入れる
var data = [
[-34.397,150.644,"http://localhost/workspace/terarin/inakataiken/map/icon4/marker1.png","タイトル1","バルーン",1],
[-34.882,150.648,"http://localhost/workspace/terarin/inakataiken/map/icon3/marker2.png","タイトル2","バルーン",2]
];

function initialize()
{

var myOptions = {
zoom: 8,
center: new google.maps.LatLng(data[1][0], data[1][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (var i = 0; i < data.length; i++){
createMarker(i,map);

}

function createMarker(num,map) {

var myLatlng = new google.maps.LatLng(data[num][0], data[num][1]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: data[num][2]
});
var contentString = data[num][3]+
‘<p><a href="#" target="_blank">参照Webサイト</a></p>’;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
}
}
[/javascript]

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


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