function showmarker(marker, name) { var infowindow = new google.maps.InfoWindow( content: marker.content, google.maps.event.addListener(marker, "mouseover", function(event) { infowindow.open(marker.getMap(), marker); }); }
上記のように実装したと仮定する。
for(var i = 0; i < lat.length; i++){ myLatLng.push({lat: lat[i], lng: lng[i]}); //緯度経度 marker[i] = new google.maps.Marker({ position: myLatLng[i], map: map, content: title[i] //地名 }); showmarker(marker[i], marker[i].content); }
上記のようにshowmarker関数を呼び出すと、mapにピンをしたすべての詳細が最後に格納した、 marker[lat.length-1].contentになってしまう。 これは、showmarker関数内で、infowindowを毎度宣言しているため、”mouseover”時に最後に宣言したinfowindowでアクションを起こすのである。
そのため、
function showmarker(marker, name, infowindow) { google.maps.event.addListener(marker, "mouseover", function(event) { infowindow.open(marker.getMap(), marker); }); }
上記のように書くmarkerに対応するinfowindowを引数として持ってくる。 そのために、showmarkerを呼び出す前に、infowindowを定義する必要がある。 infowindowを配列として宣言して、各markerに対応するように代入したのを下記に示す。
infowindow[i] = new google.maps.InfoWindow({ content: marker[i].content, });