The problem of creating markers from JSON

Question

I am trying to create tokens from a database. I do this by outputting DB results to json and loading json into google map code. JSON is valid and loading.

My full google maps code:

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

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. Most likely, the coordinates are loading. But only 1 marker appears, and this marker is not really attached to any coordinates (if you zoom out, it’s not). Also at the moment the card is very slow. Does anyone know how to solve this?

Answer 1

try this, 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 anchor point i am using jquery, you will need sub in your api key

see if you can get from this

                

    <script type="text/javascript" src="http://www.google.com/jsapi?key=your_Key_goes_here"></script>
    <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>