Google Maps Geocode Not Working in For Loop

Question

Edit - I have fixed this by using forEach rather than a for loop since the items are pulled from an array

I'm using this code to retrieve the latitude and longitude of a given address to be used with leaflet.js.

markers = [
        {
            "name": "Tom David",   
            "address": "Karachi, Pakistan",
            "url": "https://en.wikipedia.org/wiki/Anguilla"
        },
        {
            "name": "Bob Thomas",
            "address": "London, Canada",
            "url": "https://en.wikipedia.org/wiki/Japan"
        },
        {
            "name": "Bob Mike",
            "address": "Paris, FR",
            "url": "https://en.wikipedia.org/wiki/Japan"
        }
];


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

            geocoder =  new google.maps.Geocoder();
            geocoder.geocode({'address': markers[i].address}, function(results, status) {

            L.marker([results[0].geometry.location.lat(), results[0].geometry.location.lng()]).bindTooltip(markers[i].address).addTo(map); 


            });               

}

The problem lies with bindToolTip(markers[i].address) as it seems to 'break' the code though when using a string name (like "Hello"), it works just fine.

This is due to the loop not working as intended to after the new google.maps.geocoder() part. I have tried using alert(i) below the said code, and it just iterates the number 12 three times for some reason.

When it is placed above the geocoder() part, it works correctly and iterates 0, 1, and 2.

I would really appreciate any help with this.

Overall

Retrieve the address from the array based on the current i value in the for loop
Display the address retrieved in the bindTooltip() part to be displayed as a tooltip value within the map.

Edit

Asynchronous Process inside a javascript for loop This question has been marked as a duplicate of the link shown, though I am unsure of how the answers provided could be used in my own. Could someone help me out with this?

Possible duplicate of [Asynchronous Process inside a javascript for loop](https://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop) — Hodrobond, May 31 '17 at 20:53
@Hodrobond Thanks for the link, though I am really unsure of how to implement that in the case of my code? Could you help me out with this? — Osman, May 31 '17 at 20:55
[IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)s might be the easiest to implement depending on the scenario. [Here](https://jsfiddle.net/L7ce4xyL/) is a simple example. Basically create an [anonymous function](http://helephant.com/2008/08/23/javascript-anonymous-functions/) and pass `i` in. — Hodrobond, May 31 '17 at 21:00
Try something along the lines of `for (var i = 0; i < markers.length; i++) { (function(i){ geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': markers[i].address }, function(results, status) { L.marker([results[0].geometry.location.lat(), results[0].geometry.location.lng()]).bindTooltip(markers[i].address).addTo(map); })(i) }); }` — Hodrobond, May 31 '17 at 21:01
@Hodrobond Thanks a lot for the code! For some reason, the values don't get displayed this time though. I've tried changing `markers[i]` to a normal string to test it out and the markers don't even get placed on the map — Osman, May 31 '17 at 21:05

score 0 · Accepted Answer · answered Jun 02 '17 at 14:11

0

I just realised I can use forEach rather than having to use a for loop, since the data is pulled from an array

answered Jun 02 '17 at 14:11

Osman

303
1
3
14

Google Maps Geocode Not Working in For Loop

1 Answers1