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

Question

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>

Answer 1

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