jQuery iframe 中的 Google 地图未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15388897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps inside iframe not loading
提问by BenM
I ran into a strange issue, and I don't know what the problem is. The following jQuery code is a simplified version of what I want to achieve:
我遇到了一个奇怪的问题，我不知道是什么问题。以下 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);
});
The map is never loaded, and the load()event is never triggered. Chrome reports the following error:
永远不会加载地图，也永远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'.
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'.
How does one bypass this?
如何绕过这一点？
Here's a jsFiddle demo.
这是一个jsFiddle 演示。
回答by BenM
Appending &output=embedto the end of the URL fixes the problem.
附加&output=embed到 URL 的末尾可以解决问题。
回答by Raptor
As of 2014, the option &output=embeddoes not work anymore. Google suggests you to switch to Google Maps Embed API. Here is a Quick Start.
截至 2014 年，该选项&output=embed不再有效。Google 建议您切换到 Google Maps Embed API。这是一个快速入门。
Basically, the new iframe link is:
基本上，新的 iframe 链接是：
https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED}
Remember to enable Google Maps Embed APIin API Console.
请记住在 API 控制台中启用Google Maps Embed API。
p.s. checked working at the moment I write this answer
ps在我写这个答案的那一刻检查工作
回答by redochka
Make sure you enable the google maps embed api in addition to places API.
确保除了地方 API 外，还启用了 google maps embed api。
Generate you map from here:
从这里生成你的地图：
https://developers.google.com/maps/documentation/embed/start
https://developers.google.com/maps/documentation/embed/start
