從json添加多個標記到Google地圖

Question

我正在嘗試構建一個Web應用程序，它從服務器中提取數據並將多個標記添加到來自JSON響應的Google地圖中。這是JSON響應的樣子：

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

我試圖實現從this post代碼，但我無法得到它的工作。

這是我到目前爲止的代碼：

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

請試試這個：在addMarker功能

 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); 
        }); 
       } 
      }); 
     } 

其他合理使用的console.log（緯度，經度），並在這裏複製輸出。