Google maps API not showing pins

Question

TLDR:

The issue is the var marker = new google.maps.Marker() line. Somehow, this is executing and either the pins are invisible, incorrect, or not showing up.

Background:

I have some JS that uses AJAX to pull the 25 nearest businesses from my current location. The query and ajax work fine. The map centers correctly, but no pins are showing up.

The $.each() loop runs, and has the correct data. (The console.log shows the name, lat, and long just fine).

My gut tells me I have left out something simple, but I cannot find it.

What is wrong here?

PS. The order of execution here is:

1. getCurrentPosition queries teh browser for location, and executes callback geo_success()

2. geo_success() receives the corrordinates, and instantiates the map.

3. Once we have a map object, we $.ajax() the server's /locations/ service to get a JSON array of businesses to show.

4. We loop through those creating markers to add to the map

I am slightly suspicious of my leaving the maps callback initMap() blank, but I found example code in the developer's references that did this. So, should be OK.

Here's the code:

// 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("Init map @ " + 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() {
}

Answer 1

I think the problem is at this Line, use ParseFloat instead of ParseInt !

Replace this Line

 pin = new google.maps.LatLng(parseInt(item.latitude),parseInt(item.longitude));

with This

pin = new google.maps.LatLng(parseFloat(item.latitude),parseFloat(item.longitude));