Laravel 8.x网站集成Google Maps本地加载报错如何解决

云上老周

2026-10-5

Google Maps接入报错解决方案

避免重复引入谷歌地图脚本
你当前提供了两个不同参数的谷歌地图脚本引入地址，不要同时引入两个，只保留一个符合你功能需求的即可，重复加载地图脚本会直接触发报错。
检查回调函数的定义顺序和存在性
你引入的Google Maps脚本设置了callback=initMap参数，必须确保initMap全局函数在谷歌脚本加载之前就完成定义，不要把该函数写在谷歌脚本引入标签的后面。因为你给脚本加了async属性，脚本加载完成后会立即执行回调，此时如果回调函数还未定义就会触发报错。
修正libraries参数配置
你当前的脚本引入中libraries参数为空值&libraries=&，如果你用到地点自动补全、地点搜索等Places相关功能，需要将该参数改为libraries=places，和官方示例参数对齐。
检查API密钥的访问限制
即使API已经激活，你需要在Google Cloud控制台确认当前密钥的访问限制规则：如果设置了HTTP来源(referrer)限制，必须把你本地开发的域名（比如http://localhost:8000、http://127.0.0.1:8000）添加到允许的来源列表中，否则谷歌会拒绝你的调用请求。
确保地图容器有明确的高度设置
你页面中id为map的容器需要设置固定高度，比如在CSS中添加如下规则：
```
.gmaps {
  height: 400px;
  width: 100%;
}
```
没有明确高度的容器会导致地图无法正常渲染，也会触发相关报错。
检查Laravel的内容安全策略配置
如果你在项目中配置了CSP(内容安全策略)，需要将谷歌地图相关的域名加入允许列表，避免脚本、资源被拦截。