initMap 不是使用谷歌地图 API 的函数答案

【问题标题】：initMap is not a function in using google maps APIinitMap 不是使用谷歌地图 API 的函数
【发布时间】：2017-09-20 10:30:21
【问题描述】：

<html>
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
 </script>
<body onload="showMap()">
    <div id="map"></div>
    <script type="text/javascript">
    function showMap() {
        console.log('at maps');
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: { lat: -34.397, lng: 150.644 }
                });
    }
    </script>
</body>
</html>

我是脚本新手。这是我显示地图的代码。但它会引发未捕获的错误“initMap 不是函数”。谁能帮忙？？

【问题讨论】：

你在哪里/including the Google Maps Javascript API？
已包含在 api 密钥中。但仍然抛出错误
在发布的代码中没有对initMap 的引用（因此不太可能出现问题的（当前）标题中报告的问题）。请提供一个 minimal reproducible example 来证明您的问题。

标签： javascript google-maps-api-3

【解决方案1】：

迟到的答案，但您可能想查看此answer。主要问题是您没有在定义map 之后放置script。代码只是在页面上创建之前查找 Web 元素。

【讨论】：

【解决方案2】：

将showMap 重命名为initMap。 Google 期望调用名为 initMap 的函数，因为您在 Maps API 中加载时传递了 callback=initMap URL 参数。但是你没有那个名字的函数，你只有一个叫做showMap的函数。

另外，通过指定回调参数，您不需要自己显式调用 initMap 或 showMap。所以从<body>标签中删除onload="initMap()"。

此外，当您在 Maps API 中加载时，您的 URL 中有一个拼写错误，而不是：

jskey=YOUR_API_KEY

应该是：

js?key=YOUR_API_KEY

最后，您缺少我添加的任何 <head> 部分，并且我已将该函数移至 <head>，因此它应该在回调函数被调用时定义。

所以这应该有效：

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

 <script type="text/javascript">
    function initMap() {
        console.log('at maps');
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: { lat: -34.397, lng: 150.644 }
                });
    }
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

【讨论】：

仍然抛出错误。未捕获的 Vb-> 消息：“initMap 不是函数”名称：“InvalidValueError”
尝试将你的函数也移到<head>，我已经更新了我的答案。

【解决方案3】：

移动 google.map API 调用

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

在function initMap() 被定义后为我解决了这个问题。我猜 Javasrcipt 是按顺序运行的，所以当它在 google.map 回调中定义时它看不到 initMap() 函数。

【讨论】：

【解决方案4】：

您好，我也在玩谷歌地图，当您在导航器的不同选项卡中打开同一文件时，我看到此错误...

我说的是“Uncaught: Vb”

当您重新启动计算机时，此错误消失，因此您可以按“F12”，然后转到“网络”选项卡 (F5)，右键单击然后是 'clear browser chache' & 'clear browser cookies'..

如果报错 Uncaught: Vb 还是按 F5 两三下

此问题的其他参考：

GoogleMaps does not load on page load

无论如何，你的错误是因为你没有指定 YOUR_API_KEY 并且 URL 中的参数格式不正确（ js?key= ）

检查一下：

https://developers.google.com/maps/documentation/embed/get-api-key

【讨论】：

【解决方案5】：

对于我们谷歌地图，您必须首先包含对谷歌地图 javascript 文件的引用。

在您的身体下方添加此脚本。

<script src="https://maps.googleapis.com/maps/api/js"></script>

还请阅读谷歌地图的文档。您可能还需要 api 密钥。

【讨论】：

未捕获的 Vb "initMap 不是函数"

【解决方案6】：

把这个脚本标签放在你的头部分。

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

确保将 YOUR_API_KEY 标签替换为您可以从此处获取的密钥。

https://developers.google.com/maps/documentation/javascript/

【讨论】：

这不是这个问题的答案，因为这个问题与 initMap 相关