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

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

//データを入れる
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);
		    });
		}
}

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

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

ありがとうございます。

ということで、訂正

//データを入れる
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);
	    });
	}
}

Tweet