Question

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

Answer 1

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

Answer 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 。

P.S。我写这个答案的时候检查工作

Answer 3

除了刊登API之外，请务必启用google maps embed api。

从这里生成你的地图：

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

iframe内的Google地图无法加载

3 个答案: