initMap 不是函数答案

【问题标题】：initMap is not a functioninitMap 不是函数
【发布时间】：2020-08-22 03:45:22
【问题描述】：

我不明白是什么问题？我使用了来自 Google Map API 的这个例子：Simple Map

<body>
   <!-- Map Section -->
   <section id="map"></section>

   <script src="js/jquery.min.js"></script>
   <script src="js/main.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>
   
</body>

main.js：

//--------------------------------------------------
// Contact Map
//--------------------------------------------------
function initMap() {    
    if ($("#map").length > 0)
    {
        var map;
        map = new google.maps.Map(document.getElementById('map'),{
            center: {lat: 44.4297538, lng: 26.0649221},
            zoom: 16,
            scrollwheel: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            overviewMapControl: false,
            clickable: false
        });
        
    }
}

错误：

消息：“initMap 不是函数”

名称：“无效值错误”

【问题讨论】：

标签： google-maps

【解决方案1】：

遇到同样的问题，我亲自删除了&callback=initMap 以使其正常工作。其他线程接缝表明 initMap 是您应该自己构建的函数。

【讨论】：

我遇到了同样的问题...您的解决方案有效...从脚本调用中删除了 initMap 并且它有效。具有讽刺意味的是，很长一段时间以来，我什至没有在脚本行中看到它，因为我在另一个 custom.js 文件中有一个单独的initMap() - 所以我一直在看它试图找出问题所在曾是。 &callback=initMap 正在调用尚未加载的函数。我的 custom.js 文件在地图脚本之后加载 - 故意......所以尚未定义 initMap。

【解决方案2】：

我在使用 Sage（WordPress 入门主题）处理 wordpress 模板时遇到了同样的问题。

我的 js 被包裹着

(function($) {

// all the functions to create map, center markers, etc.

}

然后，地图在$(document).ready中初始化

我删除了(function($) { }，只添加了没有$(document).ready的功能，就可以了。

另外，请务必在api谷歌地图之前加载自定义js文件：

<script src="custom-js-google-map.js"></script>

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

【讨论】：

【解决方案3】：

尝试在头部加载脚本

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>

并确保正确的路径

     <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>

最终尝试使用相对路径

     <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>

【讨论】：

感谢您的回复！但我仍然有同样的错误。
当然，我查过了。 index.html 和contact.html 在根目录中。所以，我不需要使用 ./
尝试将函数放在同一个文件中（以确保它有效）。并确保 initMap() 加载时无需等待，就像使用 $(document).ready

【解决方案4】：

所提供的解决方案都没有帮助我。我终于在这里遇到了脚本的动态加载：https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API

因为您将其加载到单独的 js 文件中，所以谷歌地图 api 的加载顺序不正确。

这样做为我解决了问题：

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.defer = true;
    
// Attach your callback function to the `window` object
window.initMap = function() {
      // JS API is loaded and available
      // Throw your code within this, it will wait for the google api scripts to completely load
};
    
// Append the 'script' element to 'head'
document.head.appendChild(script);

希望这会有所帮助，我花了一天时间寻找解决方案。

【讨论】：