initMap 不是一个函数 - 地图不呈现。谷歌地图 API - JS答案

【问题标题】：initMap is not a function - map not rendering. Google Maps API - JSinitMap 不是一个函数 - 地图不呈现。谷歌地图 API - JS
【发布时间】：2016-11-17 16:28:40
【问题描述】：

我遇到了众所周知的问题initMap is not a function，我真的不知道如何解决它。我尝试了其他问题中推荐的各种方法，但没有一种方法有效。我发现的唯一可行的解决方案是使用 AngularJS 但我试图在没有它的情况下完成脚本。

这是我的html代码：

<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src ="script.js" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href ="style.css">
</head>
    <body>
    <div id ="map-canvas"> </div>
    </body>
</html>

JS代码：

window.initMap = function() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      };

对于 JS 代码，我从字面上复制并粘贴了 Google 文档中的内容，并在此处 window.initMap = function() 进行了一些小改动。

我尝试过的事情：

将function initMap() 更改为window.initMap = function()
删除initMap() 中的所有内容并提供alert("ok") 以查看如果它会出现。好吧，它没有。
将async defer的位置更改为脚本引用的末尾，同时将脚本引用放在最顶部。

我详细检查过的问题：

First try、Second、Third time wasn't the charm

我得到的错误信息：

我的地图没有被渲染，我不断收到这个错误，有什么解决方法的想法吗？

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

两个问题：

添加缺少的</script> 标签
更改页面加载顺序：

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

【讨论】：

你能告诉我为什么它不显示<script src="script.js" />吗？
那不是合法的HTML（脚本标签不是自闭的）

【解决方案2】：

尝试从这里更改脚本的顺序

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src ="script.js" />

到这里

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

        <script src ="script.js" />
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

所以这样initMap函数是在GMaps api加载之前定义的

【讨论】：

删除了错误，谢谢，但由于某种原因我的地图仍然没有被渲染。