集成多标记Google Map遇JavaScript报错，求错误解析与解决

我来帮你拆解这两个错误的根源，然后一步步修复：

错误1：Uncaught ReferenceError: google is not defined at map.js:52 #

这个错误的核心是你的map.js代码在Google Maps API加载完成前就执行了。你虽然把map.js放在了API脚本后面，但API脚本加了async defer属性——这意味着它会异步加载，可能比map.js晚完成加载。当map.js里的google.maps.event.addDomListener(...)这行代码运行时，google对象还没被API初始化，所以浏览器找不到它，抛出这个报错。

错误2：Uncaught Qb #

这个是Google Maps API的内部错误代号，本质原因是回调函数名称不匹配。你在API请求URL里写了callback=initMap，但你的初始化函数叫initialize，API加载完成后找不到指定的initMap函数，就会抛出这个内部错误。

具体修复步骤 #

1. 修正API回调函数名称
   把Google Maps API脚本里的callback=initMap改成callback=initialize，让API加载完成后能正确触发你的初始化函数：

   <script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initialize" type="text/javascript"></script>
   

2. 移除多余的window加载监听
   既然已经用API的callback参数来触发初始化，就不需要再监听window.load事件了，删掉map.js里的这行代码：

   google.maps.event.addDomListener(window, 'load', initialize);
   

3. 确保代码执行顺序安全
   保持map.js的<script>标签在Google Maps API脚本的后面，这样即使API异步加载，你的初始化函数也只会在API准备好后被回调触发，不会提前执行依赖google对象的代码。

修改后，你的地图应该能正常加载并显示所有标记了。如果还有问题，可以检查一下API密钥是否有效，以及map-canvas容器是否设置了宽高样式（很多时候地图不显示是因为容器没有尺寸）。

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