Google Maps Infowindow Only Loading Last Record On Markers

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, ho

Solution 1:

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

Solution 2:

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

 });