使用Google Maps API时控制台报‘init is not a function’错误求助

嘿，我帮你捋捋这个报错的问题——你遇到的InvalidValueError: init is not a function，本质是Google Maps API加载完要调用init函数时，压根找不到这个函数在哪儿！结合你的代码来看，主要是两个关键问题：

第一个大问题：你没在HTML里引入自己的脚本啊！ #

看你的HTML代码，只加载了Google Maps的脚本，但定义init函数的index.js完全没被引入页面！这就导致index.js里的代码根本没机会执行，window.init自然不存在，Maps API找不到函数可不就报错了嘛。

第二个小隐患：ES模块的异步加载顺序 #

因为你的index.js用了import语句，属于ES模块，模块脚本的加载是异步的。就算你加了脚本标签，如果Maps API先加载完，那时候init还没挂到全局上，照样会报错。

一步步来解决： #

1. 先在HTML里加上业务脚本的引入

修改你的HTML，把index.js的脚本标签加上，注意因为是ES模块，要加type="module"：

<body>
  <div id="map"></div>
  <div id="panorama"></div>
  <!-- 先引入我们自己的脚本，让它先执行 -->
  <script type="module" src="./index.js"></script>
  <!-- 再加载Google Maps的脚本 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=******&callback=init" async defer></script>
</body>

2. 确认init函数确实挂到全局了

你的index.js里已经写了window.init = init;，这步是对的！因为ES模块的顶层作用域不是全局作用域，必须手动把函数挂到window上，Maps API才能找到它。

3. 更稳妥的方式：动态加载Maps API（可选）

如果还是担心异步加载的顺序问题，可以去掉Maps脚本的callback参数，改成在我们自己的脚本里动态加载API，等API加载完再执行初始化：

// index.js
import { initMap } from './map'
import { buildAllDreams } from './dream'

// 动态加载Google Maps API
function loadGoogleMaps() {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=******`;
  script.async = true;
  script.onload = () => {
    // 等API加载完，再调用初始化函数
    init();
  };
  document.body.appendChild(script);
}

function init() {
  initMap();
  buildAllDreams();
}

// 启动加载流程
loadGoogleMaps();

这种方式完全不会有“找不到函数”的问题，因为我们是主动在API就绪后才执行初始化逻辑的。

最后再检查两个小细节： #

• 确认index.js、map.js的文件路径是对的，别出现404（可以在浏览器开发者工具的Network标签里看看这些文件有没有成功加载）。
• 确认你的Google Maps API密钥是有效的，没有被限制使用或者过期。

内容的提问来源于stack exchange，提问作者elodie Moret