嵌入式谷歌地图错误 - 阻止了一个带有原点的框架答案

【问题标题】：Embedded Google Maps Error - Blocked a frame with origin嵌入式谷歌地图错误 - 阻止了一个带有原点的框架
【发布时间】：2013-05-19 07:35:59
【问题描述】：

我正在尝试在客户的网站上嵌入 Google 地图。

这是我使用的嵌入代码，它是从嵌入它的页面的视图源中复制而来的。我按照此页面上的说明进行操作http://maps.google.ca/help/maps/getmaps/plot-one.html

<iframe width="180" height="250" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=
&q=5590+Joliet+Street+Denver,+Colorado+88239&aq=&sll=34.168218,-111.930907
&sspn=15.047206,26.30127&ie=UTF8&hq=&hnear=5590+Joliet+St,+Denver,+Colorado
+80239&ll=39.797915,-104.860812&spn=0.013667,0.025685&t=m&z=14&output=embed">
</iframe>

我收到错误消息（Chrome 开发者工具，控制台）阻止了一个带有来源“http://maps.google.com”的框架，无法访问带有来源“http 链接”的框架。协议、域和端口必须匹配。”并且没有地图显示。

有趣的是，当我将其粘贴到文本文档中并将其保存为 HTML 并在 Chrome 中打开时，地图将显示，但我在开发工具中仍然遇到相同的错误（除了原点为空）。

应用程序是 php，我尝试了 remove_header();选项，它没有改变任何东西，我确保 iframe 中的链接包含 output=embed。

我试过 FF、Chrome 和 IE 10，结果都一样。

这是相关页面的链接。（不能发布IP地址链接） 198 点 154 点 220 点 143/触点/

【问题讨论】：

忽略该错误，您无法更改任何内容，因为该错误是由谷歌强制执行的。此错误不会阻止地图加载，您看不到地图的原因是第 42 行的 css：iframe{display:none;}
我没看到。谢谢。

标签： php google-maps iframe x-frame-options

【解决方案1】：

您的协议不匹配，https 与 http。我刚刚看到您发布的页面上显示的所有控制台错误，它们都将谷歌地图链接显示为 https，而您的网站是 http。

这在 SO 上出现了几次，并且反复出现的建议是改用 Google Maps API。

Getting http/https protocols to match with <iframe> for maps.google.com

【讨论】：

【解决方案2】：

我认为您应该设置正确的 X-Frame-Options 标头。

见https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

【讨论】：

我认为这是在另一端。换句话说，我认为这是谷歌需要在他们身上设置的东西？

【解决方案3】：

https 中缺少“s”，这是要使用的正确代码：

<iframe width="150" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=5590%2BJoliet%2BStreet%2BDenver,%2BColorado&amp;sll=37.0625,-95.677068&amp;sspn=55.718442,121.201172&amp;ie=UTF8&amp;hq=&amp;hnear=5590+Joliet+St,+Denver,+Colorado+80239&amp;t=m&amp;ll=39.79792,-104.860811&amp;spn=0.016486,0.012789&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>

【讨论】：

顺便说一句，您可以将 iwloc 参数更改为靠近，这样您就不会得到地址气泡，您有一个非常小的地图 (180 x 250)：将 &iwloc=A 更改为 & iwloc=near 在 URL 中。另外...我注意到我将其设置为 150 像素而不是 180 像素...您也可以更改它

【解决方案4】：

Chrome 中存在一个错误，目前会停止显示嵌入式地图。解决方法是直接使用地图 API 而不是嵌入。有关更多详细信息，请参阅此问题及解决方案

https://stackoverflow.com/a/15113050/2086687

【讨论】：