Display the content associated at each marker in a infowindow using MarkerClusterer

Question

I'm new in Javascript and i've created a Google Maps using this : Using MySQL and PHP with Google Maps and MarkerClusterer.

After few hours of research, it works well, but i have still a problem. I need to have an infowindow on click on each marker. So, i add an event listener in my for circle.

The problem is : For all markers, it display the same content which is the content of the last line of my xml file.

Here the code :

    function initMap()
    {
              var map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(48.85, 2.4),
                zoom: 6
              });
                //taille de la fenêtre d'information
                var infoWindow = new google.maps.InfoWindow({
                        maxWidth: 400
                      });

                // Change this depending on the name of your PHP or XML file
                downloadUrl(sourcexml, function(data)
                {
                var xml = data.responseXML;
                var clusteredmarkers = [];
                var markers = xml.documentElement.getElementsByTagName("marker");

                        for (var i = 0; i < markers.length; i++)
                        {
                                  var idcart = markers[i].getAttribute('id');
                                  var name = markers[i].getAttribute("titre");
                                  var description = markers[i].getAttribute("description");
                                  var type = markers[i].getAttribute("categorie");
                                  var point = new google.maps.LatLng(
                                      parseFloat(markers[i].getAttribute("lat")),
                                      parseFloat(markers[i].getAttribute("lng")));


                                  var image = customImage[type] || {};
                                  var marker = new google.maps.Marker({
                                    map: map,
                                    position: point,
                                    icon: image.image,
                                    title: name
                                  });


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

                                  clusteredmarkers.push(marker);

                        }

                         var markerCluster = new MarkerClusterer(map,clusteredmarkers,{imagePath: 'images/m/m'});

                }); 
    }

Any advices, will be very much appreciated, thank you :-)

Answer 1

When you create new marker save it description inside it.

  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: image.image,
    title: name,
    description: description
  });

In addListener use description saved in marker that was clicked.

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

If you want understand what is happening in that for-loop read this: JavaScript closure inside loops – simple practical example