Using an Index to For Loop Through Google Maps Geocode API

Question

I'm trying to take a javascript array of arrays named "markers" that stores the name and street address of places that I want to add as markers on a Google Map.

var markers = [['Name of Place', '123 1st Street New York, NY'], ['Place 2', '122 1st Street, New York, NY']];

I have no problem making the map appear properly, or even making the marker appear with a title accessed from the "markers" array. As long as I access the title from the "markers" array explicitly. As shown below:

var map;
var geocoder;

    function initMap(){
             map = new google.maps.Map(document.getElementById('map'), {
                  center: {lat: 34.6760942, lng: -82.8386035},
                  zoom: 13
             });

             geocoder = new google.maps.Geocoder();

             for(i = 0; i < markers.length; i++){
                 geocoder.geocode({'address': markers[i][1]}, function(results, status) {
                  if(status == 'OK'){
                         marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location,
                              title: markers[0][0]
                         });
                  } else {
                         alert('Geocode was not successful because: ' + status);
                  }
                 });
             }
    }

However, I want to be able to use the index, "i", in the for loop to iteratively create these markers. If I try to iteratively grab the titles from the "markers" array using (title: markers[i][0]) as shown below. I get an "Uncaught type error: Cannot read property '0' of undefined.

var map; var geocoder;

function initMap(){
         map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 34.6760942, lng: -82.8386035},
              zoom: 13
         });

         geocoder = new google.maps.Geocoder();

         for(i = 0; i < markers.length; i++){
             geocoder.geocode({'address': markers[i][1]}, function(results, status) {
              if(status == 'OK'){
                     marker = new google.maps.Marker({
                          map: map,
                          position: results[0].geometry.location,
                          title: markers[i][0]
                     });
              } else {
                     alert('Geocode was not successful because: ' + status);
              }
             });
         }
}

For some reason, in the function the index, i, is not defined. How can I go about making sure "i" is defined inside the function?

Danilo Carrabino · Accepted Answer · 2017-09-15 14:43:27Z

3

May I suggest you to use closure?

function geocodeEncapsulation(i) {
    return( function(results, status){
        if(status == 'OK'){
                     marker = new google.maps.Marker({
                          map: map,
                          position: results[0].geometry.location,
                          title: markers[i][0]
                     });
              } else {
                     alert('Geocode was not successful because: ' + status);
              }
    });
}

function initMap(){
         map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 34.6760942, lng: -82.8386035},
              zoom: 13
         });

         geocoder = new google.maps.Geocoder();

         for(i = 0; i < markers.length; i++){
             geocoder.geocode({'address': markers[i][1]}, geocodeEncapsulation(i));
         }
}

answered Sep 15, 2017 at 14:43

Danilo Carrabino

3976 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

C Crawford Over a year ago

Thanks for the help. I tried to do something like that myself earlier, but couldn't seem to make it work right. That right there did work though, so I'll look back and see where I went wrong.

Danilo Carrabino Over a year ago

You're welcome mate. I'm glad my answer helped you ;)

firefly Over a year ago

I don't know you still active but if you are could you please check the this post out? stackoverflow.com/questions/53643205/…

thiirteen Over a year ago

You have no idea how relieving it was to find this solution. Thanks.

Danilo Carrabino Over a year ago

I'm very very happy I could help you :)

Collectives™ on Stack Overflow

Using an Index to For Loop Through Google Maps Geocode API

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related