Google Maps API站点集成问题：地图短暂显示后出现‘Oops, something went wrong’错误

这种地图能正常显示几秒后弹出「Oops, something went wrong」的情况，我碰到过好多个开发者遇到类似问题，基本都是API配置或密钥相关的问题，给你列几个最常见的排查方向：

• 检查对应API服务是否启用
  你虽然拿到了官方API密钥，但如果没在Google Cloud控制台启用对应的服务，地图初期能临时加载，后续权限验证就会失败。针对你的街景并排示例，需要确保启用了：

  • Maps JavaScript API
  • Street View Static API
    操作路径：进入Google Cloud控制台 → 选中你的项目 → 「API和服务」→ 「库」→ 搜索对应API并点击启用。

• 核对API密钥的限制配置
  密钥的应用限制设置错误是重灾区：

  • 如果是本地开发，要把http://localhost/*、http://127.0.0.1/*添加到HTTP referrers允许列表里；
  • 如果是线上部署，要确保你的域名格式正确，比如https://your-domain.com/*（注意星号的位置，不要写错格式）；
  • 测试阶段可以临时把限制改成「无」（上线后一定要改回严格限制），看看是否还报错，以此验证是不是限制规则导致的问题。

• 确认代码中密钥的引用是否正确
  检查加载Maps脚本的代码，确保密钥完全正确，没有拼写错误或多余符号，比如：

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

  注意key=后面直接跟密钥，不要加多余的引号或空格。

• 检查页面脚本的执行顺序
  你的地图初始化函数（比如initMap）必须在Maps脚本加载完成后再执行，用callback参数指定执行函数是官方推荐的正确方式，不要在脚本加载前手动调用初始化函数，否则会导致地图初始化不完整，后续触发报错。

另外看你贴的代码片段里widt...应该是width属性没写完，记得把CSS里的width补全，比如#map, #pano { float: left; height: 100%; width: 50%; }，不然布局可能会有问题，但这不是报错的核心原因。

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