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
– TResponse, Commented Nov 16, 2014 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
– Stuart, Commented Nov 16, 2014 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
– TResponse, Commented Nov 16, 2014 at 23:17

Community · Accepted Answer · 2017-05-23 12:27:26Z

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);
        }
    };
}

Collectives™ on Stack Overflow

looping in javascript getting unexpected results

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related