A variable in a loop is not recognized in a nested closure

Question

I have a JSON with some locations to show on a Google map with markers and info window.

With a simple loop I can create the markers on the map (there are a lot of examples for putting many markers on a single map), but I have an extra level of difficulty: since I have physical addresses in the JSON, I have to geocode them first, translating into coordinates.

Anyway, I got working this too: for each loop, every JSON item is translated in its coordinates and a marker is added

But here comes the problem: in the geocode callback I can't access my current JSON item (I need it to build my info window)... It always returns the last JSON item, so it's unuseful

Here is a working snippet:

var locations = [{"name":"Le Ginestre","address":"Via G. Marconi, Tremestieri Etneo"},{"name":"Le Zagare","address":"Via Manzoni, San Giovanni La Punta"},{"name":"Katan\u00e8","address":"Via Quasimodo 1, Gravina di Catania"}];

function initMap(){

    if (locations.length > 0){

        var i;
        var map;
        var location;
        var geocoder;
        var position;
        var marker;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };

        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();

        for(i = 0; i < locations.length; i++){
            location = locations[i];
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': location.address }, function(results, status){
                console.log(location); // THIS RETURNS ALWAYS THE LAST JSON ITEM
                if (status === 'OK') {
                    position = results[0].geometry.location;
                    bounds.extend(position);
                    map.fitBounds(bounds);
                    marker = new google.maps.Marker({
                        position: position,
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker) {
                        return function() {
                             // AND OF COURSE THIS SHOWS THE WRONG ADDRESS
                            infoWindow.setContent(location.address);
                            infoWindow.open(map, marker);
                        }
                    })(marker));
                }
            });
        }

        google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
            this.setCenter(bounds.getCenter());
        });
    }
}

#map {
  width:100%;
  height:300px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&callback=initMap" async defer></script>

<div id="map"></div>

As you see, the console.log(location); // THIS RETURNS ALWAYS THE LAST JSON ITEM line is self explained, and the info window that opens on markers' click has always the same address

I read some StackOverflow post (i.e. JavaScript closure inside loops – simple practical example) but though the problem is similar I did not understood a lot...

Please any help? Thanks

score 2 · Answer 1 · answered Nov 25 '17 at 16:56

Ok, I searched better and I found the answer, thanks to the following articles:

https://decembersoft.com/posts/understanding-javascript-closures-in-for-loops/ http://www.teknically-speaking.com/2013/01/closures-in-loops-javascript-gotchas.html

Here is a working example:

var locations = [{"name":"Le Ginestre","address":"Via G. Marconi, Tremestieri Etneo"},{"name":"Le Zagare","address":"Via Manzoni, San Giovanni La Punta"},{"name":"Katan\u00e8","address":"Via Quasimodo 1, Gravina di Catania"}];

function initMap(){

    if (locations.length > 0){

        var i, map, position, marker, location, geocoder;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };

        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();

        for(i = 0; i < locations.length; i++){
            location = locations[i];
            
            // put geocoder stuff in a closure
            (function(item){
                var name = '<b>' + item.name + '</b>';
                var address = item.address;
                
                geocoder = new google.maps.Geocoder();
                return geocoder.geocode({ 'address': address }, function(results, status){
                    if (status === 'OK') {
                        position = results[0].geometry.location;
                        bounds.extend(position);
                        map.fitBounds(bounds);
                        marker = new google.maps.Marker({
                            position: position,
                            map: map
                        });

                        google.maps.event.addListener(marker, 'click', (function(marker) {
                            return function() {
                                infoWindow.setContent(name + '<br>' + address);
                                infoWindow.open(map, marker);
                            }
                        })(marker));
                    }
                });
            })(location);
        }

        google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
            this.setCenter(bounds.getCenter());
        });
    }
}

#map {
  width:100%;
  height:300px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&callback=initMap" async defer></script>

<div id="map"></div>

Hope this can be useful for people trying to work on Google Maps

A variable in a loop is not recognized in a nested closure

1 Answers1