Google Maps infoWindow only loading last record on markers

Question

I'm trying to load a google map with dynamic markers and dynamic infoWindows to go with them. Basically I've got the markers working. The infoWindows are clickable and closable, however they do not have the correct content. It seems that the content for every infoWindow is the last record that is found in the query loop. You will see whats happening here Here's the code:

<script type="text/javascript"> 


//Load the Google Map with Options//
  function initialize() {
    var myLatlng = new google.maps.LatLng(42.48019996901214, -90.670166015625);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //Begin query loop to set the markers and infoWindow content//

    <cfoutput query="GetCoord">
    var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#);

    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: "#Client_Company#"
    });   

    var contentString = '<p><b>#Client_Company#</b><br>'+
                        '#Client_Address#<br>'+
                        '#Client_City#,&nbsp; #Client_State# &nbsp; #Client_Zip#<br>'+
                        '<a href="member_detail.cfm?ID=#Client_ID#">View Details</a>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,this);

     });
    </cfoutput>
    //End query loop
    }

</script>

Any ideas on why this is happening?

Answer 1

In your code you statically set the infowindow content on load with

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

Then when your markers are clicked you are just opening that infowindow

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
 });

this will display the same content for every marker, you do not want this.

---

what you want to do is create only one infowindow with no content (before your marker loop). then when a marker is clicked attach the content to the info window... then open the infowindow. This will save lines of code and cause the infowindow to close automatically.

before creating your markers (with the loop) add this

infowindow = new google.maps.InfoWindow();

in your marker code add the infowindow.setContent call

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);

 });

Answer 2

First off, thanks for the reply Galen! I've gone through it and made the changes you suggested, but to no avail. When I refresh the map, all of the content is still the same. However in the source it shows my contentStrings as what they are supposed to be. The content is obviously being loaded into contentString, but not transferred into the infoWindow. It must be a slow week for me as this has been driving me insane. Do I have a syntax error anywhere?

//Create blank info window//
infowindow = new google.maps.InfoWindow();

//Begin query loop to set the markers and infoWindow content//
<cfoutput query="GetCoord">
    var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#);

    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: "#Client_Company#"
    });   

    var contentString = '<p><b>#Client_Company#</b><br>'+
                        '#Client_Address#<br>'+
                        '#Client_City#,&nbsp; #Client_State# &nbsp; #Client_Zip#<br>'+
                        '<a href="member_detail.cfm?ID=#Client_ID#">View Details</a>';

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map,this);

     });

</cfoutput>
//End query loop