在谷歌地图上设置标记不起作用

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>