嵌入谷歌地图 IFRAME

Question

我似乎无法让它工作，而我过去一直这样做，成功......

我正在尝试在网页中嵌入 Google 地图 iframe。 iframe 不会加载，显示错误消息，说：

Chrome，在控制台中：拒绝显示文档，因为 X-Frame-Options 禁止显示。

IE9，页面上：此内容不能在框架中显示

我采取的步骤是：

• 在浏览器中访问谷歌地图
• 去我想嵌入的地方
• 点击链接图标
• 复制粘贴“粘贴 HTML 以嵌入网站”标签下显示的链接。

我使用的是 ASP.NET MVC4，在 IIS Express 中本地运行，但在 IIS7 中的服务器上也发生了同样的情况。

奇怪的是，当我只是创建一个本地 HTML 文件并从文件系统打开它时，我没有遇到问题。

在 jsfiddle 中粘贴代码时，它似乎确实有效。

我是否需要配置 IIS 或在我的标头中添加一些东西，或者类似的东西？

HTML sn-p

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Kortrijk,+Belgium&amp;aq=0&amp;oq=kortrijk,+bel&amp;sll=50.802805,3.279785&amp;sspn=0.351067,0.617294&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&amp;ll=50.802897,3.280106&amp;spn=0.350496,0.617294&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>

Answer 1

我无法在网络上获得任何关于在 iframe 中嵌入谷歌地图链接的各种建议。

我最终使用了谷歌地图 API，通过填写以下框生成初始代码：

http://www.map-embed.com/

并修改生成的代码以满足我的目的。

您可以使用上面的链接为您自己的地图生成代码，然后可以选择使用我的代码，并将上述网站生成的经度和纬度复制到我的代码中。您还可以将自己的 html 插入到下面的“内容”中，而与上述网站生成的内容无关。

<?php

// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if  browser isn't IE, then is FF; 
// And I don't care about other browsers.
//

$height =  "$browser" == 'ie' ? '25em' : '99%' ;

$width  =  "$browser" == 'ie' ? '99%'  : '99%' ;

echo <<<XXXEODXXX

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>

  <div                    style="height:$height; width:$width; overflow:hidden;">

    <div id="gmap_canvas" style="height:$height; width:$width;">

    </div>

    <style>

      #gmap_canvas 

        img

        {
          max-width:none!important; 
          background:none!important
        } 

    </style>

  </div>

  <script type="text/javascript">

    google.maps.event.addDomListener               ( window, 'load', init_map );

    function init_map ()

      { var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };

        map           = new google.maps.Map        ( document.getElementById ( "gmap_canvas" ), myOptions );

        marker        = new google.maps.Marker     ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );

        infowindow    = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );

        google.maps.event.addListener              ( marker, "click", function () { infowindow.open ( map, marker ); } );

        infowindow.open                            ( map, marker );
      }

  </script>

XXXEODXXX;

?>

Answer 2

感谢我的一位同事敏锐而富有洞察力的眼光，我们找到了问题所在。

首先，它似乎只出现在比利时地图上，http://maps.google.be，（显然是afaik），而不是http://maps.google.com。

当调用 IFRAME 内容时，google 会将 IFRAME 内容重定向到相同的 URL，但会附加 ?wmode=transparent。

浏览器不允许多个'?'在一个 url 中，所以它中止操作。

修复：

使用与 Google 地图生成的相同的 URL，但只需附加以下内容：

&wmode=transparent

Answer 3

你确定在 iframe 源中有 &output=embed 查询字符串参数吗？如果您不包含它，那么 Google 将不会发送正确的 X-Frame-Options 响应标头，并且您会收到您所描述的错误。

你能显示正在渲染地图的 MVC 视图的 sn-p 吗？