谷歌地图从 php 源添加标记

Question

I am trying to add an array of markers generated in php to a google map.

Here is my map code (js):

var map;
var markers = [];
var mapOptions = {
    //center: new google.maps.LatLng(locations[0].lat, locations[0].lng),
    center: new google.maps.LatLng(49.6327939,15.4174414),
    minZoom: 2,
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    scrollwheel: 0,
    keyboardShortcuts: false,
    restriction: {
        latLngBounds: {
            north: 85,
            south: -85,
            west: -180,
            east: 180
        }
    },
};


map = new google.maps.Map(document.getElementById("propertymap"), mapOptions);     
var infowindow  = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var marker, i;

   
for (i = 0; i < locations.length; i++) {
   // var data = locations[i];
    var myLatlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: locations[i][0],
        icon: mapPin,
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            for (var j = 0; j < markers.length; j++) {
                markers[j].setIcon(mapPin);
            }
            infowindow.setContent("<div>" + locations[i].description + "</div>");
            this.setIcon(mapPinActive)
            infowindow.open(map, marker);
        }
    })(marker, i));
    latlngbounds.extend(marker.position);
}

If i manually insert the locations like so, then they go into the map as expected.

var locations = [
    ['ZADUN, A RITZ-CARLTON RESERVE RESIDENCE', 23.06954546, -109.6484434],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];

However if i try and get them from a php souce via ajax, then the markers simply do now show on the map, i have even tried to parse the data:

markersURL = url;
    $.ajax({
        url:markersURL,
        success:function(data){
            //locations = JSON.parse(data);
            //console.log(locations);
            //console.log(data);
            locations = data;
        }
    })

The PHP file looks like so:

$markers[] = array('title' => get_the_title(), 'lat' => $lat, 'lng' => $lng);

echo json_encode($markers);

The output from the php file looks like so:

[
  {
    "title": "Location 1",
    "lat": "23.06954546",
    "lng": "-109.6484434"
  },
  {
    "title": "Location 2",
    "lat": "35.78127686",
    "lng": "-5.76759696"
  },
  {
    "title": "Location 3",
    "lat": "25.7974489",
    "lng": "-80.12701864"
  }
]

Any suggestion on if the structure of the data is right? I have tried json parse, and also not encoding the data, but everything i try the data doesnt seem correctly formatted for the markers to show.

Answer 1

If you're locations var contains an Array of object like you're last example. You should be able to access to object properties inside your for loop, moreover I didn't test it but I think that google maps latLng method needs numbers as params not string so you certainly need to parse your string coordinates to float :

...
for (i = 0; i < locations.length; i++) {
   // var data = locations[i];
    var myLatlng = new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng));
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: locations[i].title,
        icon: mapPin,
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            for (var j = 0; j < markers.length; j++) {
                markers[j].setIcon(mapPin);
            }
            infowindow.setContent("<div>" + locations[i].description + "</div>");
            this.setIcon(mapPinActive)
            infowindow.open(map, marker);
        }
    })(marker, i));
    latlngbounds.extend(marker.position);
}