javascript - 谷歌地图API错误: "initMap is not a function"

Question

我收到 Google Maps API 错误:initMap 不是函数。奇怪的是，我的 map 在本地测试中运行良好，然后我将其上传到我的网站并收到错误。现在它也无法在我的本地计算机上运行。这是怎么回事？

HTML

<div class="row">
    <div class="container-fluid">
        <div id="map"
             class="hidden-xs hidden-sm" 
             style="width:101%;height:400px;background:yellow">
        </div>
    </div>      
</div>

<小时/>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
    function myMap() {
        var myCenter = new google.maps.LatLng(40.488158, -85.615340);
        var mapCanvas = document.getElementById("map");
        var mapOptions = {
            center: myCenter,
            zoom: 18
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: myCenter,
            icon: 'img/smally.png',
            animation: google.maps.Animation.BOUNCE
        });

        marker.setMap(map);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 1

尝试像这样提供 async="" 属性。它有效:

function myMap() {
  var myCenter = new google.maps.LatLng(40.488158, -85.615340);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: myCenter,
    zoom: 18
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter,
    icon: 'img/smally.png',
    animation: google.maps.Animation.BOUNCE
  });

  marker.setMap(map);
}

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap" async="" defer=""></script>

<div class="row">
  <div class="container-fluid">
    <div id="map" class="hidden-xs hidden-sm" style="width:101%;height:400px;background:yellow">
    </div>
  </div>
</div>