My task involves importing addresses from a Google spreadsheet and then placing them on a Google map. The latitude and longitude for each location are stored in a variable which I use to create markers by looping through all the entries. Everything seems to be working fine with the connection between the Google Spreadsheet and the website, except that only the first entry is being displayed. This leads me to believe that there may be an issue with my loop.
Initially, I suspected that the problem lied within the values of
_location.latitude/_location.longitudeThe loop can be found within the _setLocations function and from my research, it appears that either var _bounds or _bounds.extend is causing the problem.
_createGoogleMap: function(_mapID){
var _this = this;
var _locations = [];
var _sheetUrl = 'https://sheets.googleapis.com/v4/spreadsheets/xxxxxxxxxxxxxxxxxxx/values/Sheet1!A2:U?key=xxxxxxxxxxxxxxxxxxxxxx';
var _map = new google.maps.Map(document.getElementById(_mapID), this._mapProp);
$.getJSON(_sheetUrl, function(data) {
$(data.values).each(function() {
var _location = {};
_location.latitude = parseFloat(this[8]);
_location.longitude = parseFloat(this[9]);
_locations.push(_location);
});
_this._setLocations(_map, _locations);
});
},
_setLocations: function(_map, _locations) {
var _this = this;
var _bounds = new google.maps.LatLngBounds();
var _infowindow = new google.maps.InfoWindow({
content: "Content String"
});
for (var i = 0; i < _locations.length; i++) {
var _new_marker = _this._createMarker(_map, _locations[i], _infowindow);
_bounds.extend(_new_marker._position);
}
_map.fitBounds(_bounds);
},
Before entering the loop, when I use 'console.log(_locations);', I can see all the addresses being printed. However, after the loop ends, I no longer see any output.
I would greatly appreciate any assistance with resolving this issue.