Google Maps API - window always opens last

0

Speak, all right? I'm working on Google maps, grabbing the clients in my bank and putting the Markers on the map according to their latitude and longitude, when clicking the marker opens a window displaying information, so far so good, my problem is:

When I click on a marker, 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 - pick up 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

                        } 
                } 
            });
    
asked by anonymous 08.08.2014 / 21:31

1 answer

1

The problem is there at the end, in 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 one in the loop. This is the problem discussed in question How to use the current value of a variable in an inner function?

Quick solution:

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 current Marker . Within this function it has a new name, mrk , which 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 .

    
08.08.2014 / 21:52