iframe内的Google地图无法加载

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演示.

Answer 1

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

Answer 2

截至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在我写这个答案时检查了工作

Answer 3

除了places API之外,请务必启用google maps embed api.

从这里生成您的地图:

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