Plotting LatLng coordinates from Json Array on Google Map --- the markers all stack up in the same location

Question

I have a Json array that contains latitude and longitude coordinates. Here's a sample:

"zones":[{"Zip":35824,"Latitude":34.647995,"Longitude":-86.738549},...

I'm attempting to use loop over the array to parse the coordinates and plot them on a google map. Here's my Javascript:

function getLocations() {

    $.getJSON("http://localhost:1117/zones/latlng", function (json) {

        var location;


        $.each(json.zones, function (i, item) {
            location = item.Latitude + ',' + item.Longitude, addMarker(location);
        });

    });
};

function addMarker(location) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(location),
        map: map,
        icon: redImage
    });
    markersArray.push(marker);
}

My problem is the markers end up stacked on top of each other plotted in the upper left corner of the map (right in the middle of the ocean). The location where the markers stack appears nowhere in my Json array. What did I do wrong?

Solution

I think the problem is that new google.maps.LatLng() expects (number,number) as the parameters and you're passing in a string in the format "number,number".

If you change the addMarker() function to have two parameters (e.g. latitude,longitude) that should work:

function getLocations() {

    $.getJSON("http://localhost:1117/zones/latlng", function (json) {

        var location;


        $.each(json.zones, function (i, item) {
            addMarker(item.Latitude,item.Longitude);
        });

    });
}

function addMarker(lat,lng) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: map,
            icon: redImage
        });
        markersArray.push(marker);
}