iframe 内的谷歌地图未加载答案

【问题标题】：Google Maps inside iframe not loadingiframe 内的谷歌地图未加载
【发布时间】：2013-03-13 15:01:35
【问题描述】：

我遇到了一个奇怪的问题，我不知道问题是什么。以下 jQuery 代码是我想要实现的简化版本：

var iframe = $('<iframe />');
iframe.prop('src', 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10');
iframe.appendTo($('body')); 

// When the iframe loads:
iframe.load(function() {
    alert(1);
});

地图永远不会加载，load() 事件也永远不会触发。 Chrome 报告以下错误：

Refused to display 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

如何绕过这个？

这是jsFiddle demo。

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

将&output=embed 附加到 URL 的末尾可以解决问题。

更新：Google 禁用了此功能，该功能在最初发布答案时有效。此解决方案不再有效。

【讨论】：

@pomarc 不值得反对。一年多前发布答案时，这是有效的。请考虑撤销您严厉的反对票...
即使在 2020 年，output=embed 技巧在实践中仍然有效。我现在正在使用它，它正在工作。
我可以确认在 2020 年 11 月 output=embed 不再工作。

【解决方案2】：

自 2014 年起，&output=embed 选项不再起作用。 Google 建议您切换到 Google Maps Embed API。这是Quick Start。

基本上，新的 iframe 链接是：

https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED}

记得在 API 控制台中启用 Google Maps Embed API。

附言在我写这个答案的那一刻检查工作

【讨论】：

不适用于 /dir 方向（不是 /place）
嗨@kaiser，按照设置向导here，最后一段URL应该是/directions而不是/dir
我不明白这个逻辑（谷歌的，不是你的）。我现在是否必须拥有 Google Developers 帐户才能嵌入共享地图？
@WoodrowShigeru 是的，所以他们可以获取您的数据并向您发送产品报价的垃圾邮件......天哪，他们正在对我的客户这样做，这是一个活生生的地狱......
@MarceloAgimóvel 这是一个完全免费的地图服务，以换取电子邮件地址。看起来价格公道

【解决方案3】：

确保除了地点 API 之外，还启用了 google maps embed api。

从这里生成地图：

https://developers.google.com/maps/documentation/embed/start

【讨论】：

此解决方案现在有效，请更改接受的解决方案。

【解决方案4】：

I've run this:

      <head>
        <title>Top Secret Route</title>
      </head>
      <div>
        <div>
          <embed width="1000px" height="1000px" frameborder="3px" style="border: 0px" src="https://www.google.com/maps/embed/directions?Moscow&destination=StBasil,Moscow&key=API-KEY">
          <button onclick="<embed>" ondbclick="<div>">embed</button>
          </embed>
        </div>

      </html>

但它拒绝连接即使我将它放入 CodePen 也拒绝

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review