Ошибка при попытке передать значения из массива в объект Google Maps

Question

Я устанавливаю некоторый JSON, используя данные постов WordPress на странице, а затем передаю этот JSON некоторому JS, который просматривает и добавляет маркеры на карту.Я так близок к тому, чтобы заставить его работать, просто нужно выяснить эту последнюю часть.

Мой PHP-код для создания json из массива:

<script type="text/javascript">
var markers = <?php echo json_encode($pageposts);?>  
</script>

Вот мой код JS: var infowindow = null;

  $(document).ready(function(){
  initialize();
   });

function initialize() {

var centerMap = new google.maps.LatLng(41.141208, -73.263726);
var options = {
    zoom: 12,
    center: centerMap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), options);    

setMarkers(map, markers);
  infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });
}

function setMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
  var marker = new google.maps.Marker({
  position:  new google.maps.LatLng(markers[i].meta_value), 
  map: map
});

var contentString = "Some content";

google.maps.event.addListener(marker, "click", function () {
//infowindow.setContent(this.html);
//infowindow.open(map, this);
});

}}

Если вы хотите увидеть страницу со встроенным json - перейдите по этой ссылке: http://www.fairfieldctguide.com/test-map view-source: http://www.fairfieldctguide.com/test-map

Любая помощь будет принята с благодарностью!Джейк

Answer 1

google.maps.LatLng ожидает два числа в качестве аргумента. В настоящее время вы передаете строку, которая приведет к ошибке. Поэтому вам нужно конвертировать ваши маркеры [i] .metavalue в два числа, например:

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
    latlng = markers[i].meta_value.split(",")
    lat = parseFloat(latlng[0])
    lng= parseFloat(latlng[1])
        var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(lat, lng),
            map: map
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

Если вы не хотите разговаривать, вы можете просто сохранить значения lat и lng в виде чисел в отдельных свойствах. Итак, ваш JSON будет выглядеть так:

  var markers = [{
            "ID":"883",
            "post_title":"Tucker's Cafe",
            "meta_key":"meta_geo",
            "lat":41.1674377,
"lng": -73.2236554
        }

и вы бы добавили маркер так:

var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(markers[i].lat, markers[i].lng),
            map: map
        });