Google Map Geocoded TypeError in Callback function

Question

I have the following 2 functions to pull in, geocode, and place markers in a google map.

I keep getting a TypeError: adds[i] is undefined, which of course is causing the rest of the map to bomb.

Here is my code:

// Place Markers on the Map
var PlaceMarkers = function (iw, adds, gc) {
    var image = {url: "http://meatmysite.com/Images/star2.png", size: new google.maps.Size(24, 24)};
    var aCt = adds.length;
    for(var i = 0; i < aCt; ++i) {
        GetLatLng(gc, adds[i].address, function(pos) {
            if(pos) {
                var ipop = '<h1>' + adds[i].title + '</h1>'; // <-----   TypeError: adds[i] is undefined
                if(!isBlank(adds[i].url)){
                    ipop += '<a href="' + adds[i].url + '" target="_blank">' + adds[i].url + '</a><br />';
                }
                ipop += '<div class="map_item_content" id="mi_content' + i + '">' + adds[i].content + '</div>';
                if(!isBlank(adds[i].mainphone)){
                    ipop += '<br /><strong>Phone:</strong> <a href="tel:'+adds[i].mainphone+'">' + adds[i].mainphone + '</a>';
                }
                if(!isBlank(adds[i].mainemail)){
                    ipop += '<br /><strong>Email:</strong> <a href="mailto:'+adds[i].mainemail+'">' + adds[i].mainemail + '</a>';
                }
                console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
                var mark = new google.maps.Marker({title: adds[i].title, position: pos, map: map, icon: image, html: ipop});            
                google.maps.event.addListener(mark, 'click', function(){
                    iw.setContent(this.html);
                    iw.open(map, this);
                });
            }
        });
    }
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
    var ret = '';
    gc.geocode({'address': add}, function(res, status) {
        if (status == 'OK') {
            f(res[0].geometry.location);
            console.log('Found Here: ' + ret.toString());
        }
    });
    return -1;
};

DEMO RETURNED DATA FOR adds

[
{
    "address": "1 My Street Gilbert, AZ 85234",
    "title": "My Title 1",
    "url": "http://www.myurl.com/",
    "mainphone": null,
    "mainemail": null,
    "content": "1 My Street<br />Gilbert, AZ 85234"
},
{
    "address": "2 My Street North Richland Hills, TX 76182",
    "title": "My Title 2",
    "url": null,
    "mainphone": null,
    "mainemail": null,
    "content": "2 My Street<br />North Richland Hills, TX 76182"
}
]

Answer 1

One option, pass the complete "address" object into the GetLatLng function, and from there into its callback (so you get function closure on it):

// Get Lat/Lng Location
var GetLatLng = function (gc, add, f) {
    gc.geocode({
        'address': add.address
    }, function (res, status) {
        if (status == 'OK') {
            f(res[0].geometry.location, add);
        }
    });
};

Then use it like this inside the callback (you could pass just the index into the array also):

GetLatLng(gc, adds[i], function (pos, add) {
    if (pos) {
        var ipop = '<h1>' + add.title + '</h1>'; 
        if (!isBlank(add.url)) {
            ipop += '<a href="' + add.url + '" target="_blank">' + add.url + '</a><br />';
        }
        ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
        if (!isBlank(add.mainphone)) {
            ipop += '<br /><strong>Phone:</strong> <a href="tel:' + add.mainphone + '">' + add.mainphone + '</a>';
        }
        if (!isBlank(add.mainemail)) {
            ipop += '<br /><strong>Email:</strong> <a href="mailto:' + add.mainemail + '">' + add.mainemail + '</a>';
        }
        console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
        var mark = new google.maps.Marker({
            title: add.title,
            position: pos,
            map: map,
            icon: image,
            html: ipop
        });
        google.maps.event.addListener(mark, 'click', function () {
            iw.setContent(this.html);
            iw.open(map, this);
        });
    }
});

proof of concept fiddle

code snippet:

var geocoder = new google.maps.Geocoder();
var map;
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  PlaceMarkers(infoWindow, adds, geocoder);
}
google.maps.event.addDomListener(window, "load", initialize);

// Place Markers on the Map
var PlaceMarkers = function(iw, adds, gc) {
  var bounds = new google.maps.LatLngBounds();
  var image = {
    url: "http://meatmysite.com/Images/star2.png",
    size: new google.maps.Size(24, 24)
  };
  var aCt = adds.length;
  for (var i = 0; i < aCt; ++i) {
    GetLatLng(gc, adds[i], function(pos, add) {
      if (pos) {
        var ipop = '<h1>' + add.title + '</h1>'; // <-----   TypeError: adds[i] is undefined
        if (!isBlank(add.url)) {
          ipop += '<a href="' + add.url + '" target="_blank">' + add.url + '</a><br />';
        }
        ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
        if (!isBlank(add.mainphone)) {
          ipop += '<br /><strong>Phone:</strong> <a href="tel:' + add.mainphone + '">' + add.mainphone + '</a>';
        }
        if (!isBlank(add.mainemail)) {
          ipop += '<br /><strong>Email:</strong> <a href="mailto:' + add.mainemail + '">' + add.mainemail + '</a>';
        }
        console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
        var mark = new google.maps.Marker({
          title: add.title,
          position: pos,
          map: map,
          // icon: image,
          html: ipop
        });
        bounds.extend(mark.getPosition());
        map.fitBounds(bounds);
        google.maps.event.addListener(mark, 'click', function() {
          iw.setContent(this.html);
          iw.open(map, this);
        });
      }
    });
  }
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
  gc.geocode({
    'address': add.address
  }, function(res, status) {
    if (status == 'OK') {
      f(res[0].geometry.location, add);
    }
  });
};

var adds = [{
  "address": "1 My Street Gilbert, AZ 85234",
  "title": "My Title 1",
  "url": "http://www.myurl.com/",
  "mainphone": null,
  "mainemail": null,
  "content": "1 My Street<br />Gilbert, AZ 85234"
}, {
  "address": "2 My Street North Richland Hills, TX 76182",
  "title": "My Title 2",
  "url": null,
  "mainphone": null,
  "mainemail": null,
  "content": "2 My Street<br />North Richland Hills, TX 76182"
}];

function isBlank(str) {
  return (!str || /^\s*$/.test(str));
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>