TLDR:
The problem lies within the var marker = new google.maps.Marker() line. It seems that either the pins are not visible, incorrect, or simply not appearing.
Background:
I have implemented some JavaScript code that utilizes AJAX to fetch data on the 25 nearest businesses from my current location. The AJAX query works fine, and the map centers correctly, but the pins marking the businesses are not showing up.
The $.each() loop iterates as expected and displays the correct data (as evidenced by the console.log output of the business name, latitude, and longitude).
My instinct tells me that I may have overlooked something simple, although I have been unable to identify it so far.
What could be causing this issue?
PS. The sequence of events is as follows:
getCurrentPosition requests the browser for location data and invokes the callback function geo_success()
geo_success() receives the coordinates and initializes the map
After obtaining a map object, we make an AJAX call to the server's /locations/ service to fetch a JSON array of businesses
We then iterate through the data to create markers and add them to the map
I am somewhat suspicious about leaving the maps callback initMap() empty, but I came across example code in the developer's references that does the same, so it should be fine.
Below is the code snippet:
// Footer JS
var wpid = navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
var latitude = 0;
var longitude = 0;
function geo_success(position) {
console.log(position.coords.latitude, position.coords.longitude);
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log("Initializing map at " + latitude + ", " + longitude);
var myCenter = {lat: latitude, lng: longitude};
var mapOptions = {
zoom: 12,
center: myCenter,
mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
counter = 0;
$.ajax({
url:'/locations/',
data: {
latitude : latitude,
longitude : longitude
},
dataType: 'json'
}).done(function(data){
$.each(data,function(i,item){
console.log("Adding pin " + i + " for: " + item.label + " @ " + item.latitude + ", " + item.longitude);
pin = new google.maps.LatLng(parseInt(item.latitude),parseInt(item.longitude));
var marker = new google.maps.Marker({
position: pin,
map: map,
type:'info'
});
})
});
}
function geo_error() {
alert("Sorry, no position available.");
}
function initMap() {
}