如何将谷歌地图嵌入index.html？

在网页中嵌入谷歌地图，最快捷且最可靠的方法就是使用iframe。这种方法无需申请API密钥，无需编写JavaScript代码，也无需配置复杂环境，只需复制粘贴代码，地图即可立即显示。

使用iframe嵌入谷歌地图时，src属性必须设置为完整的embed链接

一个常见的错误是直接将浏览器地址栏中的谷歌地图网址（例如https://www.google.com/maps/place/...）复制到iframe的src属性中。结果要么页面空白，要么控制台报错Refused to display。原因是谷歌只允许通过其官方生成的特定路径来嵌入地图。

• 正确操作：打开谷歌地图，找到要展示的地点。点击右下角的「」菜单，选择「共享或嵌入地图」，然后切换到「嵌入地图」标签页。直接复制其中提供的整段代码。
• 不要手动拼写：链接中pb=后面的一长串参数包含了坐标、缩放级别、地图样式等信息，只要改错一个字符，整个地图就无法加载。
• 如果地图显示为空白，且浏览器控制台没有明显错误，通常是因为使用了非/embed开头的链接。

将iframe宽高设为100%时，必须将其包裹在已定义尺寸的父容器中

为了让地图自适应，很多人会设置width="100%" height="100%"。但浏览器会困惑：这个比例是相对于谁的？如果父元素没有明确尺寸，百分比将失去参照物，最终iframe会坍缩成0×0像素不可见。

• 推荐结构：使用
  包裹iframe，并通过CSS为该容器设置具体高度。例如固定高度height: 450px，或使用padding-top: 56.25%（实现16:9比例）配合绝对定位实现响应式高度。
• 不要仅依赖宽度：只设置width: 100%可能在移动端撑破布局，建议加上max-width: 100%进行约束。
• 附加两个属性：给iframe添加loading="lazy"实现懒加载，提升页面性能；添加referrerpolicy="no-referrer-when-downgrade"可减少因隐私策略导致的警告和加载阻塞。

使用JavaScript API初始化地图前，必须确认三个关键点

如果不仅需要展示静态地图，还要添加标记点、响应点击事件或动态调整地图中心，则需要使用功能更强大的google.maps.Map API。不过，这种方法踩坑的几率远高于iframe，绝大多数问题集中在以下三个环节：

• 脚本加载顺序：引入API的标签务必带上async和defer属性，并放在中或底部。如果直接放在顶部，DOM可能尚未准备好，会报出经典错误Cannot read property 'Map' of undefined。
• API密钥权限：在Google Cloud Console中，必须明确开启Maps JavaScript API服务。仅开启Geocoding API或Places API无法让地图正常显示。
• 本地开发环境：切勿直接使用浏览器打开本地file://协议的HTML文件进行测试。必须通过本地服务器（例如http://localhost:xxxx）访问，或部署到线上环境。否则密钥校验会失败，提示InvalidKeyMapError。

还有一个容易掉入的陷阱是密钥的“HTTP引荐来源”限制。例如，只将example.com/*加入白名单，但访问时使用了带“www”的域名https://www.example.com，请求仍会被拒绝，因为“www”被视为子域名。解决办法是单独添加带“www”的地址，或直接使用通配符*.example.com/*。