Google Maps API V3 - Issue with infobox and loop

Question

I'm using Google Maps API V3 and facing an issue with my infoboxes. My code only displays the infobox for my last marker. I cannot find out why. Maybe a closure issue but not sure.

Here is my code :

var directionsDisplay;
var directionsService;
var info;
var i;

function initialize() {
        var markers=[];
        var GeocoderOptions;
        var myGeocoder;
        var temp;
        info = [
        ['57 Avenue Joseph Kessel 78180 Montigny-le-Bretonneux','Paul VERLAINE','Testinfo'],
        ['24 Rue du champ d avoine 78180 Mintigny-le-Bretonneux','Charles PEGUY','Testinfo'],
        ['21 Rue du Poirier Saint Martin 78180 Mintigny-le-Bretonneux','Maurice GENEVOIX','Testinfo'],
        ['13 Rue des Pyrenees 78180 Montigny-le-Bretonneux','Neil COSAQUE','Testinfo'],
        ['14 Rue des Pyrenees 78180 Montigny-le-Bretonneux','Louise THEVENOUX','Testinfo'],
        ['9 Rue des Bleuets 78180 Montigny-le-Bretonneux','Melanie JARNET','Testinfo'],
        ['10 Rue des Bleuets 78180 Montigny-le-Bretonneux','Antony JARNET','Testinfo'],
        ['30 Rue de la Republique 78180 Montigny-le-Bretonneux','Erin BARTOUT','Testinfo'],
        ['31 Rue de la Republique 78180 Montigny-le-Bretonneux','Fabien BARTOUT','Testinfo'],
        ['29 Rue de la Republique 78180 Montigny-le-Bretonneux','Christophe BARTOUT','Testinfo']
        ];
        var pinImage;
        var marker;
        var loc =new google.maps.LatLng(48.772, 2.028);
        var mapOptions = {
          center: loc,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionsPanel'));

        myGeocoder = new google.maps.Geocoder();

        for(i=0;i<info.length;i++){
            GeocoderOptions={
                'address' : info[i][0],
                'region':'FR'       
            };
            myGeocoder.geocode( GeocoderOptions, function(i){
            return function(results, status){

                if(status == google.maps.GeocoderStatus.OK){
                marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: info[i][1],
                        icon: pinImage
                    });
                markers.push(this);
                //var contentMarker = 'Testinfo';
                var infoWindow = new google.maps.InfoWindow(/*{
                    content : contentMarker
                }*/);
                google.maps.event.addListener(marker, 'click', function() {

                infoWindow.setContent(info[i][2]);
                infoWindow.open(map,marker);
            }); 

                } else {
                    alert("L'adresse n'a pas pu etre geocodee avec succes.");
                }

            }
            }(i));      
        }
         calcRoute();

      }
      function calcRoute(){

            var request = {
                origin: info[5][0],
                destination: info[1][0],
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function(response,status){
                if(status==google.maps.DirectionsStatus.OK){
                //alert("Je passe ici2");
                    directionsDisplay.setDirections(response);
                }
            });
        }
      google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

It seems it's closure problem: you get infoWindow of last index. I add a new function:

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.open(map, marker);
    });
}

and commented out/changed the part of event listenter:

                    //google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.setContent(info[i][2]);
                    //infoWindow.open(map,marker);
                    //});
                    addInfoWindowOnEvent(marker, infoWindow, map, 'click');

Text for infowindow is little expanded to see difference. Before it was just testinfo.

Additionally, I also commented out variable pinImage from marker because it is not defined.

See example at jsbin