2

私はこれをうまく機能させることができないようですが、私は過去にそうしてきましたが、成功しました...

GoogleMapsiframeをWebページに埋め込もうとしています。iframeが読み込まれず、次のようなエラーメッセージが表示されます。

Chrome、コンソール：X-Frame-Optionsで表示が禁止されているため、ドキュメントの表示を拒否しました。

IE9、ページ上：このコンテンツはフレームに表示できません

私が取るステップは次のとおりです。

  • ブラウザでグーグルマップに移動します
  • 埋め込みたい場所に行く
  • リンクアイコンをクリックします
  • 「Webサイトに埋め込むためにHTMLを貼り付け」というラベルの下に表示されているリンクをコピーして貼り付けます。

IISExpressでローカルに実行されているASP.NETMVC4を使用していますが、IIS7のサーバーでも同じことが起こります。

不思議なことに、ローカルHTMLファイルを作成してファイルシステムから開くだけで、問題は発生しません。

jsfiddleにコードを貼り付けると、機能しているように見えます。

IISを構成したり、ヘッダーに何かを追加したりする必要がありますか？

HTMLスニペット

<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>
4

3 に答える 3

2

私の同僚の鋭く洞察に満ちた目のおかげで、私たちは問題を発見しました。

まず第一に、それはベルギーの地図http://maps.google.be（afaik、明らかに）にのみ表示され、 http ：//maps.google.comには表示されないようです。

IFRAMEコンテンツを呼び出すと、GoogleはIFRAMEコンテンツを同じURLにリダイレクトしますが、?wmode=transparent追加されます。

ブラウザは複数の「？」を許可していません URLであるため、アクションを中止します。

修正するには：

Googleマップで生成されたものと同じURLを使用しますが、次を追加するだけです。

&amp;wmode=transparent
于 2012-11-13T11:02:44.097 に答える
1

&amp;output=embediframeソースにクエリ文字列パラメータが確実にありますか？これを含めないと、Googleは正しいX-Frame-Options応答ヘッダーを送信せず、説明したエラーが発生します。

マップがレンダリングされているMVCビューのスニペットを表示できますか？

于 2012-11-12T14:04:48.610 に答える
0

iframeにグーグルマップのリンクを埋め込むためのウェブ上のさまざまな提案を得ることができませんでした。

私は最終的にグーグルマップAPIを使用し、次のボックスに入力して初期コードを生成しました。

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

結果のコードを私の目的に合うように変更します。

上記のリンクを使用して独自のマップのコードを生成し、オプションで、上記のWebサイトで生成された経度と緯度をコードにコピーしてコードを使用できます。上記のウェブサイトが作成するものとは関係なく、以下の「コンテンツ」に独自の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;

？>

于 2015-11-20T18:23:07.857 に答える