Currently, I am developing a phoneGap application and going around my house to gather coordinates:
var locations = [
{lat:123.12313123, lng:123.123345131},
{lat:123.12313123, lng:123.123345131}
]
While referring to the documentation here, everything seems to be working perfectly. In a particular example, the script defer async is triggered when calling initMap(). This function sets up a single marker on the map, which displays accurately in Australia for me.
To start off, I create the map itself:
var map; // declaring it globally
function initMap() {
var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: myLatLng
});
}
This script generates the map successfully. Now, I want to loop through my list of coordinates like this:
// Note that the map has already been initialized at this stage
$(locations).each(function(i, item) {
var marker = new google.maps.Marker({
position: item,
map: map,
title: 'Route item ' + i
});
})
Unfortunately, this approach is not functioning as expected. I'm unable to call initMap() within a loop, and even if I could, it wouldn't work properly. Moreover, specifying a fixed number of coordinates beforehand isn't feasible since I need to wait until they are all collected. What could potentially be the issue with my current setup?