GoogleMapのマーカー毎に吹き出しを表示しようとしたら最後の1つしか表示されない
Google Mapプログラミングをして、Google Map のマーカー毎に吹き出しを表示しようとしたが、最後の1つしか表示されない。
for(var index in data){ // 2.直前で作成したMarkerOptionsを利用してMarkerを作成 marker = new google.maps.Marker(markerOpts); //吹き出しを作成 infowindow = new google.maps.InfoWindow({ content: contentString //吹き出し内コメント }); //3.マウスをかざしたときに吹き出しがオープンするイベントを定義 google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,marker); }); }
原因はgoogle.maps.event.addListenerの中でコールバック関数を直接function(){}の形で実装していること。
markerはfor文のインデックスindexに依存する変数で、for文内で都度google.maps.event.addListenerを定義しているが、コールバック関数が実行されるときにはindexはfor文がまわりきった最後のindex値になってしまっている。
これを解決するには、コールバック関数を変数として定義して、それを指定すれば良い。
次のソースコードがイメージ。
//コールバック関数を定義する var callback = function(var marker){ infowindow.open(map,marker); } for(var index in data){ //リスナー追加時には定義したコールバック関数を指定する google.maps.event.addListener(marker, 'mouseover', callback(marker)); }