嘿，我来帮你搞定这两个谷歌地图嵌入的问题！

嵌入谷歌地图到网站最常用且靠谱的方式就是用<iframe>标签，操作起来也简单：

• 方法一：用谷歌地图官方的分享工具生成代码
  1. 打开谷歌地图，找到你要嵌入的地点、路线或者全景视图
  2. 点击地图右上角的「分享」按钮，选择「嵌入地图」选项
  3. 在弹出的窗口里调整地图尺寸、缩放级别等设置，直接复制生成的<iframe>代码，粘贴到你的HTML文件里就搞定了
• 方法二：手动构造<iframe>代码
  如果你不想用分享工具，也可以手动写代码，但要注意使用谷歌地图专用的嵌入URL格式，不是所有谷歌地图的网页URL都能直接当src用。比如嵌入单个地点的话，src可以是https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d...这类格式（具体参数可以从分享工具里获取）

你当前用的src链接是谷歌地图方向API的调用URL（https://www.google.com/maps/dir/?api=1&...），这个URL是用来发起导航请求的，本身就不是给iframe嵌入用的，所以加载失败很正常。给你两个解决办法：

办法一：用谷歌地图分享工具生成正确的路线嵌入代码 #

这是最省心的方式，不需要折腾API密钥：

1. 打开谷歌地图，搜索「从Space Needle到Pike Place Market的骑行路线」
2. 找到路线后点击右上角「分享」→「嵌入地图」
3. 调整到你需要的450x250尺寸，复制生成的代码，它大概长这样：

<iframe id="iframeid" width="450" height="250" style="border:0" src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d10747.00024344936!2d-122.343013!3d47.610121!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x54906abf0f622c31%3A0x303ada1e6807ac0!2sSpace+Needle%2C+Seattle%2C+WA!3m2!1d47.620506!2d-122.349277!4m5!1s0x54906ab68cb09dab%3A0x949d669d7621558f!2sPike+Place+Market%2C+Seattle%2C+WA!3m2!1d47.609722!2d-122.342556!5e1!3m2!1sen!2sus!4v1720000000000" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

把这段代码替换你原来的iframe，就能正常加载了。

办法二：使用谷歌地图嵌入API（需要API密钥） #

如果你需要更灵活地控制嵌入内容，可以用官方的嵌入API，不过得先去谷歌云平台申请一个API密钥，并且启用「Maps Embed API」：

<iframe id="iframeid" width="450" height="250" style="border:0" src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&mode=bicycling" allowfullscreen="" loading="lazy"></iframe>

记得把YOUR_API_KEY替换成你自己的有效密钥，不然地图还是加载不出来。

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