Предоставление нескольких маркеров API V3 для Google Maps от JSON

Question

Попытка построить несколько маркеров с помощью API Карт Google V3 из выхода JSON с помощью PHP из базы данных.

Карта инициализируется на странице, однако она не заполняется маркерами. Браузер предупреждает: «Ресурс интерпретируется как« Другой », но передается с неопределенным типом MIME».?

Предложения по дальнейшему устранению неполадок/отладки.

 <!-- load points from database into Locations JSON --> 
    $(document).ready(function() { 
     $.getJSON("map-service.php?action=listpoints", function(json) { 

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

     function addMarker(location) { 
      var point = new google.maps.LatLng(location.lat, location.lng); 
      var marker = new google.maps.Marker({ 
       position:point, 
       map: map, 
       title: location.name 
       }); 
      }; 


    }); 

Утвержденный образец вывода JSON из карты-service.php? Действий = listpoints

{"Locations":[{"name":"Abco Mountain","lat":"49.424999","lng":"-125.855003"},{"name":"Adder Peak","lat":"49.248333","lng":"-125.320000"},{"name":"Alexandra Peak","lat":"49.738110","lng":"-125.489998"},{"name":"Argus Mountain","lat":"49.538612","lng":"-125.389999"},{"name":"Big Baldy Mountain","lat":"49.759998","lng":"-126.129997"}]} 

Answer 1

Моя проблема связана с тем, как я инициализировал исходный объект карты. Это не было видно в коде, который я поделил ... извинения.

Я сделал это:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

и должен был сделать это:

this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

Я нашел решение в этом посте Adding markers after map created Спасибо @yitwail!

Answer 2

Попробуйте использовать JQuery $ .each для зацикливания.

, если (JSON & & json.Locations) {

$ .each (json.Locations, функция() { addMarker (это); });

});

Кроме того, вы, вероятно, захотите вызвать parseFloat на lat и longiture внутри вашей функции addMarker.