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

时间:2017-04-19 02:10:08

标签: javascript jquery html google-maps google-maps-api-3

我有一个JSON数据,其中包含城市的纬度和长值。我需要将它放在谷歌地图上并在其上放置标记。这是我的代码:

<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>

我试图调试问题。我从每个循环得到lat和long值。但是,当我尝试使用标记将其放在地图上时,它不会显示出来。有人能帮助我吗?

1 个答案:

答案 0 :(得分:0)

您需要将回调添加到Google脚本。文献。 OnReady不会触发地图就绪事件。

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