Problem creating markers from JSON

Question

I am trying to create markers from a database. I do this by outputting the DB results to json and loading the json in the google maps code. The JSON is valid and is being loaded.

My full Google maps code is:

google.load("maps", "2");

// make a json request to get the map data from the Map action
$(function() {
if (google.maps.BrowserIsCompatible()) {
    $.getJSON("/GoogleMaps/Map", initialise);
}
});

function initialise(mapData) {

var map = new google.maps.Map2($("#map")[0]);
    map.addControl(new google.maps.SmallMapControl());
    map.addControl(new google.maps.MapTypeControl());
    map.setMapType(G_SATELLITE_MAP);

    var latlng = new google.maps.LatLng(52.370, 4.893);
    var zoom = 8;

    map.setCenter(latlng, zoom);

map.setCenter(latlng, zoom);

$.each(mapData.locations, function(i, location) {
    setupLocationMarker(map, location);
});
}

function setupLocationMarker(map, location) {
console.debug(location.LatLng);
var latlng = new google.maps.LatLng(location.LatLng);
var marker = new google.maps.Marker(latlng);
map.addOverlay(marker);
}

The JSON:

{
"locations": [
    {
        "Id": 1,
        "Name": null,
        "LatLng": "52.368, 4.806",
    },
    {
        "Id": 2,
        "Name": null,
        "LatLng": "52.333, 4.839",
    },

Ive tried debugging with Firebug but I get no errors. The coordinates seem to load just fine. But only 1 marker shows up, and that marker isn't actually attached to any coordinates it seems (if you zoom out it doesn't ajust). Also the map is very slow at this point. Does anyone know how to solve this?

Answer 1

try this out it works for me

 function setupLocationMarker(map, location) {
    console.debug(location.LatLng);
    var point = new GLatLng(location.LatLng);       
    var marker = new GMarker(point);
    map.addOverlay(marker);
 };

hmmm here is a good strating point I use jquery you'll need to sub in your api key

see if you can get what you need from this

    <script type="text/javascript" src="http://www.google.com/jsapi?key=your_Key_goes_here"&gt;&lt;/script&gt;
    <script type="text/javascript" charset="utf-8">
        google.load("maps", "2.x");
        google.load("jquery", "1.4.2");
    </script>
    <script>


    $(document).ready(function(){
        //setup the map
        var map = new GMap2(document.getElementById('map'));
        var state_college = new GLatLng(40.802,-77.833);
        map.setCenter(state_college, 11);

        var geo = new GClientGeocoder();

        var reasons=[];

        reasons[G_GEO_SUCCESS]            = "Success";
        reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address";
        reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address.";
        reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address";
        reasons[G_GEO_BAD_KEY]            = "Bad API Key";
        reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries";
        reasons[G_GEO_SERVER_ERROR]       = "Server error";


        var bounds = new GLatLngBounds();

        $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));   
        var mapdata = {
            "Locations":[
                {
                    "id":"6",
                    "name":"Old Main",
                    "lat":"40.79648590088",
                    "lng":"-77.86285400391"
                },
                {
                    "id":"7",
                    "name":"Somewhere Further",
                    "lat":"42.65258026123",
                    "lng":"-73.75623321533"
                }

        ]}


            if (mapdata.Locations.length > 0) {
                for (i=0; i<mapdata.Locations.length; i++) {
                    var location = mapdata.Locations[i];
                    addLocation(location);
                }
                zoomToBounds();
            }


    function addLocation(location) {
        var point = new GLatLng(location.lat, location.lng);       
        var marker = new GMarker(point);
        map.addOverlay(marker);
        bounds.extend(marker.getPoint());
        GEvent.addListener(marker, "click", function(){
                showMessage(marker, location.name);
        });

    }


        function showMessage(marker, text){
            var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
            $("#message").hide().fadeIn()
            .css({ top:markerOffset.y, left:markerOffset.x })
            .html(text);
            map.panTo(marker.getLatLng());
        }

        function zoomToBounds() {
            map.setCenter(bounds.getCenter());
            map.setZoom(map.getBoundsZoomLevel(bounds)-1);
        }
    });
    </script>
</head>
<body>
    <div id="map"></div>
    <ul id="list"></ul>
    <div id="message" style="display:none;"></div>

</body>