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?

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?

• javascript
• jquery
• google-maps

2 Answers 2

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);
}

use clustering .make group of markers as cluster.one cluster will present many markers inside.also make bounds.