Setting up Marker Clusterer markers with info windows

Question

Hi guys.

I'm having an issue with setting up the info windows for multiple markers in google map api. Basically, Im getting the latitudes and longitudes and everything else from external Json file. I'm parsing it correctly because markers are showing on the map. However, when I'm trying to add an info window for each one of them it only show info window for the most recent added marker + whenever I point on different marker it will still go to this latest marker showing its info window. Here's the source code:

  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    /* Sets up markers */    
    markers = []; 

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {
      //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

        var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
             var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
              var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

        var contentString = '<div>'+
              '<div>'+
              '</div>'+
             '<h4>'+coordinates.title+'</h1>'+
              '<div>'+
              '<p>'+coordinates.excerpt+'</p>'+
                 '</div>'+
              '</div>';

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

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


        markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 
  }

Can someone please give me some help with this? Thanks.

//Edited------------------------------------------------------

So I've changed it and now it looks like this:

infoWindow = new google.maps.InfoWindow();

  for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
  {
              //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

                var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
               var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                var contentString = '<div>'+
                                     '<div>'+
                                  '</div>'+
                                    '<h4>'+coordinates.title+'</h1>'+
                                  '<div>'+
                                     '<p>'+coordinates.excerpt+'</p>'+
                                     '</div>'+
                                  '</div>';

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

                markers.push(marker);
  }

  /* Sets up marker clusterer */
  var markerCluster = new MarkerClusterer(map, markers); 

Still doesn't work :/

Answer 1

As far as I know, you can only have one InfoWindow. You should add a onclick event to each marker in which you define the content of the window.

I think you should change:

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

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

to something like:

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

The infoWindow should be defined outside your for loop.

Good luck!

** EDIT **

I think you need to use unique names for your markers.

This is a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?v=3&amp;amp;sensor=false&amp;amp;key=
    <<INSERT YOUR KEY HERE>>" type="text/javascript"></script>
<script>
function initialize() {
// Create google map
var latlng = new google.maps.LatLng(31.0293534,5.1736923);
var myOptions = {
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 1,
    backgroundColor: "#99B3CC",
    mapTypeControl: false
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow();

/**
 * First marker
 */

var latLng = new google.maps.LatLng(31.0293534,5.1736923);
var marker1 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});


google.maps.event.addListener(marker1, 'click', function() {
    infoWindow.setContent("Some content Marker 1");
    infoWindow.open(map,marker1);
});

/**
 * Second marker
 */

var latLng = new google.maps.LatLng(25.271139,55.307485);
var marker2 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});
marker2.onclick = function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
};
google.maps.event.addListener(marker2, 'click', function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
}); 
}
window.onload=initialize; 
</script>

</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

You may have to change the key. But at my place this works like a charm. The most simple example I can give you.

Answer 2

Ok I've found a solution to this. It's kinda a hack but it works for me. I'm putting it here in case someone else would need it:

    <script type="text/javascript">

  /* Sets up the map with markers */
  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

      /* Sets up markers */    
         markers = []; 

      infoWindow = new google.maps.InfoWindow();              

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {              

                    var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
                   var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                    var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                    var contentString = '<div>'+
                                        '<h4>'+coordinates.title+'</h1>'+
                                      '<div>'+
                                         '<p>'+coordinates.excerpt+'</p>'+
                                         '</div>'+
                                      '</div>';

                  addMarker(marker, contentString);
                    markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 


      function addMarker(marker, content)
        {
           google.maps.event.addListener(marker, 'click', function() {
                           infoWindow.setContent(content);
                           infoWindow.open(map, marker);
         });
        }

  }

</script>