Google Maps API 错误：“initMap 不是函数”答案

【问题标题】：Google Maps API Error: "initMap is not a function"Google Maps API 错误：“initMap 不是函数”
【发布时间】：2016-11-27 09:39:10
【问题描述】：

我收到了 Google Maps API 错误：initMap is not a function。奇怪的是，我的地图在我的本地测试中运行良好，然后我将其上传到我的网站并得到了错误。现在它也不能在我的本地机器上运行。怎么回事？

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>

【问题讨论】：

你的<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap" async defer></script> API KEY 在哪里？
w3 学校表示，只有在您计划交通拥堵时才需要这样做，而我没有。那是问题吗？ @rizkidplast
试试看这个https://developers.google.com/maps/documentation/javascript/get-api-key
@RizkiDPrast 好的，我现在正在使用，但仍然有错误。
你是对的，不必使用api key 进行低流量/测试。请检查下面的答案

标签： javascript html twitter-bootstrap google-maps

【解决方案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>

【讨论】：