looping in javascript getting unexpected results

Question

I am trying to add markers to a google map, and these markers have a number on them, however what I get is the same marker repeated throughout the loop why is this? Here is my code,

function codeAddress() {
var address = ['hd3 3nn', 'hd6 3qf'];
for (var i = 0; i < address.length; i++) {
    var num = i;
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png',
                  new google.maps.Size(20, 34),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(10, 34));
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

}

Basically this /~udders/wp-content/themes/m/img/markers/marker' + num + '.png is creating, /~udders/wp-content/themes/m/img/markers/marker1.png the one is the number from the last loop, and it seems to be overwriting all the previous icon images.

I don't really see anything wrong with your code. Can you try creating the image in-line with the marker so marker.icon = new google.maps.MarkerImage(..) and then just as a test create a var count = 0 and increment that rather than using i in the loop. — TResponse, Nov 16 '14 at 22:54
@loanburger the problem is that the functions created in each pass of the loop continue to have access to the same `num` variable whose value is stored in the outer function. — Stuart, Nov 16 '14 at 22:57
Cheers Stuart that makes sense as your answer suggests below. Looking back at previous code I did around this I did the geocoding in a separate function as well. — TResponse, Nov 16 '14 at 23:17

score 1 · Accepted Answer · edited May 23 '17 at 12:27

This is because of how Javascript closures work.

You could work around it by making a separate function which returns a callback function.

function codeAddress() {
    var address = ['hd3 3nn', 'hd6 3qf'];
    for (var i = 0; i < address.length; i++) {
        geocoder.geocode({'address': address[i]}, getGeocoderCallBack(i));
    }
}

function getGeocoderCallback(num) {
    return function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png',
            new google.maps.Size(20, 34),
            new google.maps.Point(0, 0),
            new google.maps.Point(10, 34));
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    };
}

looping in javascript getting unexpected results

1 Answers1