单页嵌入6个Google Maps无法正常工作问题求助

阿华AIGC实验室

2026-5-25

排查多Google Maps嵌入失败的常见问题

嘿，我来帮你梳理下可能导致6个Google Maps都加载失败的常见问题——毕竟Google Maps API的坑我可是踩过不少😉

先从最基础也最容易忽略的点开始排查：

核心API脚本是否正确引入？
你贴的代码里完全没看到Google Maps的官方API脚本啊！这可是加载地图的前提，必须先引入它，还要带上你的API密钥，格式得是这样：
```
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=你的初始化函数名"></script>
```
注意要把这个脚本放在你的google_maps_options.js之前，不然你的自定义代码会找不到google这个全局对象，直接报错。
API密钥的权限配置是否到位？
登录Google Cloud控制台，先检查这两个关键配置：
- 确认你的API密钥已经启用了Maps JavaScript API；
- 「应用限制」里如果选了HTTP引用网站，一定要把你当前网站的域名加进去（比如https://你的域名.com/*），别漏了也别乱设通配符；「API限制」要勾选Maps JavaScript API，避免权限溢出或者配额问题。
地图容器的样式有没有设置正确？
每个地图对应的DOM容器必须有明确的宽高，比如：
```
.map-box {
  width: 100%;
  height: 400px; /* 绝对不能是auto，必须是具体数值或者百分比父容器有固定高度 */
}
```
要是容器没高度，哪怕地图加载成功了也会完全看不见，这是新手最常踩的坑！

多地图的初始化逻辑有没有问题？
6个地图需要创建6个独立的google.maps.Map实例，分别绑定到不同的容器ID上，别搞混了ID或者不小心覆盖了同一个实例。比如你的google_maps_options.js里是不是给每个地图写了对应的初始化代码？可以参考这个简化示例：

function initAllMaps() {
  // 第一个地图
  new google.maps.Map(document.getElementById('map-1'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  // 第二个地图
  new google.maps.Map(document.getElementById('map-2'), {
    center: {lat: 51.5074, lng: -0.1278},
    zoom: 10
  });
  // 剩下4个以此类推，每个对应唯一的容器ID
}

浏览器控制台有没有报错信息？
按F12打开开发者工具，看Console面板的错误提示，这是最快定位问题的方法：
- 如果是Google Maps JavaScript API error: InvalidKeyMapError：API密钥无效或者没传对；
- 如果是Google Maps JavaScript API error: RefererNotAllowedMapError：你的域名不在API密钥的允许列表里；
- 如果是google is not defined：API脚本没加载或者加载顺序错了。
Foundation框架会不会有冲突？
Foundation的JS可能会和Google Maps的DOM操作、事件监听有冲突，你可以先把foundation.js注释掉，测试地图能不能正常加载。如果能加载，再慢慢排查Foundation的初始化逻辑是不是影响了地图容器的渲染。