Question

I am using the MarkerCluster library for Google Maps v3 and am having a problem getting the info windows to work properly for the markers.

What’s happening is that the markers are being placed in the correct location, however when you click on them the info window for the last marker created pops up no matter which marker is clicked on.

Here is the JavaScript:

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

      var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(46.90, -121.00),
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow = new google.maps.InfoWindow({ 
        //size: new google.maps.Size(150,150)
        maxWidth: 500,
    });

    var markers = [];

    for (var i = 0; i < businesses.length; i++) {

        var latLng = new google.maps.LatLng(businesses[i].latitude, businesses[i].longitude);

        var contentString = businesses[i].latitude;

        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            zIndex: Math.round(latLng.lat()*-100000)<<5
        });

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

        markers.push(marker);


    }

    var markerCluster = new MarkerClusterer(map, markers);

  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

I’m sure it’s something simple that I keep overlooking, but I haven’t been able to pin point the problem.

Any help would be appreciated.

Answer 1

I had similar problems which I fixed by using a closure when adding the event listener:

for (var i = 0; i < businesses.length; i++) {

    var latLng = new google.maps.LatLng(businesses[i].latitude, businesses[i].longitude);

    var contentString = businesses[i].latitude.toString();

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        zIndex: Math.round(latLng.lat()*-100000)<<5
    });

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

    markers.push(marker);
}

I hope this helps.