google maps infoWindow in javascript（通过循环创建多个infoWindow）

Question

I am pulling my latlng object from a database and when I loop through the query in the javascript the markers all populate just fine, but when ever I click on one they all open the same infoWindow object on a different marker. I assume this is some sort of naming issue, but I am having trouble finding out why because it all looks right to me. the following code is in a cfoutput tag creating the loop.

var latlng_#get_latlng.recordcount# = new google.maps.LatLng(#get_latlng.mlat#,#get_latlng.mlong#); 
var marker_#get_latlng.recordcount# = new google.maps.Marker({
    position: latlng_#get_latlng.recordcount#,
    map: map,
    title: "test"
});

var contentString_#get_latlng.recordcount# = "test" + #get_latlng.recordcount#;

var infowindow_#get_latlng.recordcount# = new google.maps.InfoWindow({
    content: contentString_#get_latlng.recordcount#
});

google.maps.event.addListener(marker_#get_latlng.recordcount#, 'click', function() {
    infowindow_#get_latlng.recordcount#.open(map,marker_#get_latlng.recordcount#);
});

Answer 1

Doesn't 'recordcount' return the number of values in your result set? In which case, all your variable names will be the same. Therefore they will all be rendered correctly, but will continually overwrite the JavaScript variable reference: and will all create an infoWindow based on the last one you did.

You need a more unique name: I presume you wanted an index based on the resultset index, but a simple count would be fine.

Answer 2

Rather than producing so much redundant JS, I'd create a function that adds the markers.

function addMarker(lat, lng, title, content) {
    var latlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: title
    });
    var infowindow = new google.maps.InfoWindow({ content: content });
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
}

Then in your loop:

addMarker(#get_latlng.mlat#,#get_latlng.mlong#,"#get_latlng.title#","#get_latlng.content#");