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?

In FF3.6.8, I get three map markers, which appears correct based on the page source. What browser are you having problems with? — Ben Doom, Aug 26 '10 at 15:31
Those three are the correct map markers, but the content in the infoWindows SHOULD be different. All three of them are actually the content that is the last record in my GetCoord query. — knawlejj, Aug 26 '10 at 15:41

score 46 · Answer 1 · edited Dec 31 '12 at 21:09

46

Add content as a property to marker object and use this.content in the event handler:

var marker = new google.maps.Marker(options);
marker.content = '<div>Content goes here....</div>';

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
                                infoWindow.setContent(this.content);
                                infoWindow.open(this.getMap(), this);
                            });

edited Dec 31 '12 at 21:09

Leigh

28,765
10
55
103

answered Jun 13 '12 at 07:43

H.M.

612
1
5
7

1

Had the exact same situation, just a standard JS loop for a JSON result coming from a AJAX request: for (var i = 0; i < result.length; i++) { var marker[...] } the only way I could make it work was this one (the accepted answer does not work for me). – firepol Apr 18 '13 at 09:26
1

Same as firepol said. This worked like a charm, the accepted answer did not. – Justin Carlson May 07 '13 at 15:59
2

The accepted answer did not work for me. This solution did. Thanks @H.M. – Steven Leimberg Jul 23 '13 at 17:32
This should be the accepted answer. Tried Galen's solution without success. This one works – Jaaaaaaay May 16 '16 at 16:40
You're magnificent. Thank you! We spent like two hours on this. This should definitely be the accepted answer — As on May 2016 at least. – IIllIIll May 18 '16 at 02:04
nice :) +1 from me as well – pregmatch Aug 23 '16 at 02:10

Galen · Accepted Answer · 2010-08-26T18:37:32.020

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

 });

This did not work for me. @H.M.'s solution worked perfectly. The method above kept attaching the infowindow to the last marker in my loop. — Justin Carlson, May 07 '13 at 15:58

Google Maps infoWindow only loading last record on markers

2 Answers2

Linked