initMap 不是 Google Maps Javascript 的函数答案

【问题标题】：initMap is not a function Google Maps JavascriptinitMap 不是 Google Maps Javascript 的函数
【发布时间】：2016-12-09 17:26:50
【问题描述】：

我知道有人问过这个问题。但我还是过不去。我只是想在 js fiddle 中加载 googlemaps API。我无法克服错误：initMap 不是函数。我的 jsfiddle 在这里：jsfiddle

我的代码：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });

HTML：

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
    </script>

当我有函数 initmap(){}（带括号）时，地图不会加载，我得到错误。删除 function initmap{} 时，只需：

var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 34.397, lng: 150.644 },
    scrollwheel: false,
    zoom: 2
});

地图加载，但我仍然收到错误：

initMap 不是函数

这可能与回调有关。我有一段时间没有写过javascript了。但我只需要克服这个错误。谢谢

【问题讨论】：

这是复制错误还是您没有正确关闭initMap？

标签： javascript jquery html google-maps

【解决方案1】：

这是一个JSFiddle 的工作原理。

基本上将你的函数放在对Google API的调用之上

<script>
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    } // close function here
    </script>
    <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
        </script>

该功能也没有正确关闭。

【讨论】：

【解决方案2】：

TL;DR

在小提琴中，你有一个语法错误，没有用} 关闭iniMap()。此外，该函数是在 DOM 加载后定义的。要解决这个问题：

将负载类型设置为包含<body> 或<head>
修复语法错误

以下是处理这些问题的方法。

全局范围

将initMap 放在全局范围内。不要将函数定义包装在私有或匿名范围内，例如

(function(){

function initMap(){
    //
}

})();

DOM 加载

如果可能，请在<head> 中定义函数。或者至少在<body> 中加载 API 之前。并且永远不要在 dom 完全加载后定义 initMap，如 window.onload 和 document.addEventListener('ondomready', callback)

好习惯

<script>
function initMap(){
  //
}
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

不良做法：

window.onload

<script>
window.onload = function(){
  function initMap(){
     //
  }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

和

<script>
document.addEventListener('ondomready', function(){
  function initMap(){
     //
  }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

或者$(function(){ })如果你正在使用jQuery

<script>
$(function(){
  function initMap(){
     //
  }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

【讨论】：

【解决方案3】：

我一直在许多论坛中寻找答案，但我只是在我的代码中发现了一个丢失的';'。删除';'后一切正常。

我知道这不是最好的答案，但我希望它对某人有所帮助。

【讨论】：

【解决方案4】：

您在声明之前调用了 initMap。

https://jsfiddle.net/mp7j7gy0/60/

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

var initMap = function() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });
}

initMap()

【讨论】：

【解决方案5】：

我也偶然发现了这个问题，但就我而言，罪魁祸首似乎是 mod_pagespeed。

我认为它修改了页面中脚本的顺序，因此以前的解决方案不起作用。我设法通过动态添加地图的script 标签来解决它。

<script>
    function initMap() {
        // some code
    }

    // dynamically add your map
    var tag = document.createElement('script');
    tag.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap";
    tag.defer = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

【讨论】：

【解决方案6】：

我使用的是 leaflet.js，Google 将其作为我的默认脚本

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

基本上只是删除回调查询字符串参数，因为传单应该调用它。

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

【讨论】：