CODEWITHSUNDEEP
javascriptgoogle-mapsasynchronousgoogle-maps-api-3closures
user12068391
user12068391

Reputation:

Google Maps javascript with multiple markers => Label text is everywhere the same in a loop

The below code is working perfect, except for the marker label texts... The array contains the actual address and the load order number. The markers are placed correctly on the map, but all the label texts are displaying '3', and not 1, 2, 3... How can this be resolved?

<div id='track_trace_map'></div>

<script>
    function track_trace_map() {
    var truck_last_position_lat = '44.1747',
    var truck_last_position_long = '1.6117',
        var map = new google.maps.Map(document.getElementById('track_trace_map'), {      
            center: {
                lat: truck_last_position_lat,
                lng: truck_last_position_long
            },
            zoom: 6
        });
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            map: map,
            position: {
                lat: truck_last_position_lat,
                lng: truck_last_position_long
            },
        });
        var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];
        for (var x = 0; x < track_trace_collections.length; x++) {
                $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false', null, function (data) {
                    var p = data.results[0].geometry.location
                    var latlng = new google.maps.LatLng(p.lat, p.lng);
                    new google.maps.Marker({
                        animation: google.maps.Animation.DROP,
                        label: {
                            color: 'white',
                            fontWeight: 'bold',
                            text: String(track_trace_collections[x][1])
                        },
                        map: map,
                        position: latlng
                    });
                });
        }
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEYHIDDEN&language=en&callback=track_trace_map"></script>

Upvotes: 3

Views: 140

Answers (2)

Philip Wrage
Philip Wrage

Reputation: 1559

Using var with asynchronous callbacks can result in unexpected behavior, as you've seen.

You can use let to limit the scope of your label values within the for loop, permitting the anonymous function you pass to $.getJSON to close over the appropriate scope, using the correct label values when later called.

For example:

var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];

// need to use let to properly scope loop control variable
// so it goes out of scope when loop completes
for (let x = 0; x < track_trace_collections.length; x++) {

    // use let to limit scoping to inside the for loop
    // then anonymous function passed to $.getJSON will close over proper value
    // this may not be necessary if 'x' is properly scoped using let
    let trackTraceLabel = String(track_trace_collections[x][1]);

    $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            label: {
                color: 'white',
                fontWeight: 'bold',
                text: trackTraceLabel
            },
            map: map,
            position: latlng
        });
    });
}

Upvotes: 1

Chris B.
Chris B.

Reputation: 5763

This is because you're running an async operation inside your loop. getJSON takes time to go to the server and receive a response before its callback function will run, and by the time the request resolves, your loop has already run its course and x is 3.

You'd need to define an async function and wait for the request to finish before allowing the loop to continue running. Something like:

var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];

const asyncLoop = async () => {
  for (var x = 0; x < track_trace_collections.length; x++) {
     const data = await $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false');
     var p = data.results[0].geometry.location
     var latlng = new google.maps.LatLng(p.lat, p.lng);
     new google.maps.Marker({
         animation: google.maps.Animation.DROP,
         label: {
              color: 'white',
              fontWeight: 'bold',
              text: String(track_trace_collections[x][1])
              },
              map: map,
              position: latlng
                });
        }
}
asyncLoop();

Should work.

Upvotes: 0

Related Questions