JQuery Geolocation Variable Issue

Question

User-195907812 posted

Hi,

I'm trying to loop through a collection of postcodes (zip codes) and using geolocation to get the coordinates of each and move them to an array, however something strange happens to the variables that I pass to the loop - it doesn't change.

Complete js code...

var coordinates = [];

$(document).ready(function () {
    
    var store1 = { name: "MyStore01", postcode: "aaaaa" };
    var store2 = { name: "MyStore02", postcode: "B40 1NT" };
    var store3 = { name: "MyStore03", postcode: "TR19 7AA" };
    var store4 = { name: "MyStore04", postcode: "EH1 2NG" };
    var store5 = { name: "MyStore05", postcode: "NE13 8BZ" };

    var mystores = [];

    mystores.push(store1);
    mystores.push(store2);
    mystores.push(store3);
    mystores.push(store4);
    mystores.push(store5);

    GetCoordinates(mystores);
});

function GetCoordinates(stores) {



    for (var i = 0; i < stores.length; i++) {

        var _postcode = stores[i].postcode;
        var _name = stores[i].name;

        getLocationData(_postcode, function (locationData) {
            CreateMarker(_name, locationData.geometry.location.lat(), locationData.geometry.location.lng());
        });
    }
}

function getLocationData(position, callback) {
    geocoder = new google.maps.Geocoder();
    if (geocoder) {
        geocoder.geocode({ 'address': position }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback(results[0]);
            }
        });
    }
}

function CreateMarker(name, storeLat, storeLng)
{
    // I need the store name here, for when I create the marker
    // but it's always the final value (MyStore05)
    alert(name + " = " + storeLat + "/" + storeLng);
}

In this example, the alert displays the "NE13 8BZ" postcode each time but the location changes.

Why is this happening and how would I resolve?

Answer 1

User475983607 posted

In this example, the alert displays the "NE13 8BZ" postcode each time but the location changes.

Why is this happening and how would I resolve?

Try using the "let" keyword.  Otherwise you have to use a closure... it just how JavaScript works.

    for (var i = 0; i < stores.length; i++) {

        let _postcode = stores[i].postcode;
        let _name = stores[i].name;

        getLocationData(_postcode, function (locationData) {
            CreateMarker(_name, locationData.geometry.location.lat(), locationData.geometry.location.lng());
        });
    }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Answer 2

User-195907812 posted

Thanks mgebhard. I still don't understand 'why' this was happening but it's not working :)