Проблема создания маркеров из JSON

Question

Я пытаюсь создать маркеры из базы данных. Я делаю это, выводя результаты DB в json и загружая json в код Google Maps. JSON действителен и загружается.

Мой полный код карт Google:

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",
    },

Я пытался отладить Firebug, но не получаю ошибок. Кажется, координаты загружаются просто отлично. Но отображается только 1 маркер, и этот маркер на самом деле не привязан ни к каким координатам, как кажется (если вы уменьшите масштаб, он не отрегулируется) Также карта очень медленная на данный момент. Кто-нибудь знает как это решить?

Answer 1

попробуйте, это работает для меня

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

хммм, вот хороший момент для страстного обращения. Я использую jquery, который вам понадобится в вашем API-ключе

посмотрим, сможете ли вы получитьчто нужно от этого

    <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>