Google Maps API - window always opens the last

Question

Talk personal, all right? I’m working on Google maps, picking up customers in my bank and putting the Markers on the map according to their latitude and longitude, when you click on the Mark opens a window displaying information, so far so good, my problem is:

When I click on some Mark, it always opens the last

my code:

JS

$.ajax({                                      
                url: url, 
                format: 'json',
                success: function(rows){
                        rows = $.parseJSON(rows);
                        for (var i in rows){    
                                var row = rows[i],          
                                    id = row[0],
                                    nome = row[1],
                                    lat = row[9],
                                    lon = row[10];
                                    codigo += '';

Here begins the Marker - 1st - take the position

                                    var Posicao = new google.maps.LatLng(lat,lon);

2nd - I do the Marker

                                    var Marker = new google.maps.Marker({
                                            position: Posicao,
                                            map: map,
                                            center: Posicao,
                                            icon: imagemPin,
                                            title:"LUGAR",
                                            zIndex: 3});

3rd - window info

                                    var textoInfo = "<img src='img/logo.png' style='width: 60%;'><p>Ola"+nome+", voce ta por aqui!</p>";                

                                    var infoLocal = new google.maps.InfoWindow({
                                        content: textoInfo
                                    });

4th - here the event when I click on a Marker

                                    google.maps.event.addListener(Marker, "click", function() {
                                        infoLocal.open(map,Marker);
                                    });

                                    //END MARKER

                        } 
                } 
            });

Answer 1

The problem is there at the end, at the event:

google.maps.event.addListener(Marker, "click", function() {
    infoLocal.open(map,Marker);
});

It happens that at the moment of the click, Marker is no longer the one you expect, but the last of the loop. It is the problem discussed in the question How to use the current value of a variable in a more internal function?

Quick fix:

google.maps.event.addListener(Marker, "click", (function(mrk, info) {
    return function() {
        info.open(map,mrk);
    };
}(Marker, infoLocal)));

What the above code does is create an anonymous function and invoke it immediately by passing the Marker current. Within this function it has a new name, mrk, who will be "remembered" (via closure) separately for each iteration of your loop. This function generates and returns the Listener that is passed to google.maps.event.addListener.