javascript - 未捕获的 ReferenceError : google is not defined at google. maps.Marker()

Question

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap"
            async defer></script>
    <script>
            var user_lat,user_lng;
            var map;
            function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat:17, lng: 80},
                            zoom: 5
                            });
            }
            var marker = new google.maps.Marker({
                position: {lat:17,lng:80},
                map: map,
                title: 'Hello World!'
            }); 
    </script>

这是为了测试目的。我必须在另一个代码中使用这个概念。请帮助这个。

这可能是重复的。还有许多其他帖子报告了同样的错误，但没有一个答案解决了我的问题。

map 加载没有任何问题。 initMap() 函数被执行。但是标记部分不会出现。

Answer 1

既然你有 async和 defer属性，api 库的执行被推迟。当marker正在定义中，浏览器还没有加载库，所以google.maps.Marker没有定义。

移动定义标记的代码 initMap()功能，它应该工作。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVD0ngfhOFs5rnww7UFyz9rN6UznOIZ1U&callback=initMap" async defer></script>
<script>
  var user_lat,user_lng;
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:17, lng: 80},
      zoom: 5
    });
    var marker = new google.maps.Marker({
      position: {lat:17,lng:80},
      map: map,
      title: 'Hello World!'
    }); 
  }
</script>

var user_lat, user_lng;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 17,
      lng: 80
    },
    zoom: 5
  });
  var marker = new google.maps.Marker({
    position: {
      lat: 17,
      lng: 80
    },
    map: map,
    title: 'Hello World!'
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>