27

我遇到了一个奇怪的问题，我不知道问题是什么。以下 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 演示。

4

3 回答 3

50

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

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

于 2013-03-13T15:14:21.833 回答
20

自 2014 年起，该选项&output=embed不再起作用。Google 建议您切换到 Google Maps Embed API。这是一个快速入门。

基本上，新的 iframe 链接是：

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

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

ps 在我写这个答案时检查了工作

于 2015-07-28T02:57:35.410 回答
16

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

从这里生成地图：

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

于 2014-12-28T15:27:22.277 回答