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

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#");