从JSON向Google地图添加多个标记

Question

I am trying to build a web app that pulls data from server and adds multiple markers to the google map from the JSON response. This is how the JSON response looks like:

{"key":[{"Latitude":"60.186518","Longitude":"24.950575"}...]}

I tried to implement the code from this post but I can't get it to work.

This is my code so far:

    function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '600px';

  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 15,
    center: coords,
      panControl: false,
  zoomControl: false,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: false,
  overviewMapControl: true,

    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"});

 function getLocations() {

    $.getJSON("http://myurl.com/jsonresponse", function (json) {

        var location;


        $.each(json.key, function (i, item) {
            addMarker(item.Latitude,item.Longitude);
        });

    });
}

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

}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

Answer 1

Please try this:

  function getLocations() { $.ajax({ url: 'http://myurl.com/jsonresponse', async:false, success: function(data) { $.each(data.key, function(index) { addMarker(data[index].Latitude,data[index].Longitude); }); } }); } 

Other wise use console.log(lat,lng) in addMarker function and copy the output here.