不用。直接用<iframe>嵌入谷歌地图无需API Key，只需从Google Maps“分享→嵌入地图”复制官方代码；手动拼URL易因缺失pb参数导致404，且不支持自定义样式或JS交互功能。
直接用 <iframe> 嵌入谷歌地图，现在必须带 API Key 吗？
不用。只要用的是谷歌官方分享的嵌入代码（即点击地图右下角「分享」→「嵌入地图」生成的 <iframe>），**不强制要求 API Key**，也无需配 OAuth 或启用任何服务。这是谷歌为公开地图展示保留的免费通道，但有明确限制：不能自定义样式、不能调用 JS API 功能、不能隐藏控件。
常见错误是手动拼 <iframe src="https://www.google.com/maps/embed?pb=..."> 却漏掉 pb 参数（即 map ID 编码），导致 404 或白屏。正确做法永远从谷歌地图界面点「分享」→「嵌入地图」复制整段代码，不要手改 URL。
复制的 <iframe> 代码在网页里不显示？检查这三点
最常卡在这几个地方：
-
width和height设为固定像素（如600）但父容器有max-width: 100%冲突，导致地图被压扁——建议统一用width="100%"+ 固定height（如height="450"），或用 CSS aspect-ratio 控制响应式比例 - 页面启用了 CSP（Content Security Policy），拦截了
https://www.google.com的 iframe 加载——检查浏览器控制台报错是否含Refused to frame 'https://www.google.com/'，若有，需在Content-Security-Policy响应头中添加frame-src https://www.google.com; - 用户本地开了广告屏蔽插件（如 uBlock Origin），默认屏蔽含
google.com/maps/embed的 iframe——可加loading="lazy"属性缓解，或提示用户临时关闭过滤器
<iframe> 嵌入和 JS API 的核心区别在哪？
别混淆两者用途：
-
<iframe>是「只读快照」：加载的是谷歌服务器渲染好的静态地图图片+基础交互（缩放、拖动、切换图层），所有逻辑在谷歌端，你无法监听点击事件、无法叠加自定义标记、不能用setCenter()等方法控制 - JS API 是「完全控制权」：需申请 API Key、启用
Maps JavaScript API服务、写 JS 初始化地图对象——适合做路线规划、实时定位、动态标记等交互场景 - 性能上：
<iframe>首屏加载更快（无 JS 解析开销），但每次访问都触发谷歌外部请求；JS API 首次加载稍慢，但后续操作全在本地执行
移动端适配和无障碍要注意什么？
默认嵌入代码在手机上容易出现横向滚动或缩放失灵：
- 务必给
<iframe>外层加style="overflow: hidden;"，防止谷歌地图内部滚动条溢出容器 - 在
<head>中确认已声明 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 可能忽略width="100%" - 无障碍支持弱——
<iframe>默认没有title属性，屏幕阅读器无法描述内容。必须手动补上，例如：<iframe title="公司办公地点位置，位于北京市朝阳区建国路8号">
真正麻烦的不是嵌入本身，而是当客户突然说“要点击地图跳转到街景”或“标记三个不同颜色的门店”——那已经超出 <iframe> 能力边界，得切到 JS API 重做。
