在谷歌地圖上設置標記不起作用

Question

我有一個JSON數據，其中包含城市的經度和緯度值。 我需要將其放置在Google地圖上並在其上放置標記。 這是我的代碼：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id = "map">
  <script type="text/javascript">
    var map;
    function init(){
      var options = {
        zoom:11,
        center : new google.maps.LatLng(37.542571,-121.993037)
      };
      map = new google.maps.Map(document.getElementById("map"),options);
    }; 
    var jsonData = {
      "locations":
        {
          "location":
            [
              {
                "id": "0001",
                "type": "RetailLocation",
                "address": "Fremont, CA 94538",
                "latitude":37.542571,
                "longitude":-121.993037,
                "$revenue": 10000000
              },
              {
                "id": "0002",
                "type": "RetailLocation",
                "address": "Newark, CA",
                "latitude": 37.525400,
                "longitude":-122.037764,
                "$revenue": 3000000
              },
              {
                "id": "0003",
                "type": "RetailLocation",
                "address": "4100-4198 Pleiades Pl,Union City, CA 94587",
                "latitude": 37.587546,
                "longitude":-122.066716,
                "$revenue": 120000000
              },
              // ...
            ]
        }
    };

    $(document).ready(function(){
      $.each(jsonData.locations.location,function(key,json){
        var latLng = new google.maps.LatLng(json.latitude,json.longitude);

        var marker = new google.maps.Marker({
          position: latLng
        });
        marker.setMap(map); 
      });
    });
  </script>
</div>

我試圖調試問題。 我從每個循環中獲取經度和緯度值。 但是，當我嘗試使用標記將其放在地圖上時，它不會顯示。 有人能幫我嗎？

Answer 1

您需要將回調添加到Google腳本。 文獻。 OnReady將不會觸發地圖准備事件。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>