Маркеры не нарисованы на карте

Question

Я написал код ниже, и все работает с точки зрения данных, данные возвращаются из ajax-вызова в формате JSON, например, снизу.

Проблема, кажется, с функцией addMarker, данные передаются в функцию ОК, я проверил это с alert() из функции addMarker но не маркеры не быть нанесены на карту, и никаких ошибок не быть брошен в браузере или консоли.

Нужно ли мне звонить setMapOnAll после добавления каждого маркера, чтобы отобразить его на карте? Я попытался добавить setMapOnAll в конец функции addMarker, но ничего не изменилось.

JSON:

{id:278, title:"", lat:"52.50474200", lng:"-8.71032700"} 

Javascript:

$(document).ready(function() { 
var map; 
var markers = []; 

function loadMap() 
{ 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     minZoom: 2, 
     maxZoom: 12, 
     zoom: 6, 
     disableDefaultUI: true, 
     zoomControl: true 
    }); 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      map.setCenter(initialLocation); 
     }); 
    } else { 
     map.setCenter({lat: -34.397, lng: 150.644}); 
    } 

    loadMarkerData(-1); 
} 

function addMarker(lat, lng) { 
    var marker = new google.maps.Marker({ 
     position: {lat: lat, lng: lng}, 
     map: map 
    }); 
    markers.push(marker); 
} 


function setMapOnAll(map) { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(map); 
    } 
} 

function loadMarkerData(selectedKeys, year, source) 
{ 
    var data = {id: 1}; 

    if (selectedKeys != '' && year != '' && source != '') { 
     data = {id: 1, selectedKeys:selectedKeys, year:year, source:source}; 
    } 

    $.ajax(
    { 
     url: "ajaxcall.php", 
     type: "POST", 
     data: data, 
     success: function (data, textStatus, jqXHR) 
     { 
      if (data != '') { 
       markerObj = eval(data); 

       $.each(markerObj, function(index, element) { 
        addMarker(element.lat, element.lng) 
       }); 
      } 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      console.log(textStatus); 
     } 
    }); 
} 
}); 

Answer 1

С исходным кодом, я получаю ошибку яваскрипта: Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number, поскольку эти значения являются строками. Вы можете исправить, это изменить:

function addMarker(lat, lng) { 
    var marker = new google.maps.Marker({ 
     position: { 
      lat: lat, 
      lng: lng 
     }, 
     map: map 
    }); 
    markers.push(marker); 
} 

To:

function addMarker(lat, lng) { 
    var marker = new google.maps.Marker({ 
     position: { 
      lat: parseFloat(lat), 
      lng: parseFloat(lng) 
     }, 
     map: map 
    }); 
    markers.push(marker); 
}