27

奇妙な問題に遭遇しましたが、何が問題なのかわかりません。次の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のデモです。

4

3 に答える 3

50

URLの末尾に追加&output=embedすると、問題が修正されます。

更新：Googleは、回答が最初に投稿されたときに機能していたこの機能を無効にしました。このソリューションは機能しなくなりました。

于 2013-03-13T15:14:21.833 に答える
20

2014年の時点で、このオプション&output=embedは機能しなくなりました。Googleは、Google MapsEmbedAPIに切り替えることをお勧めします。これがクイックスタートです。

基本的に、新しいiframeリンクは次のとおりです。

https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED}

APIコンソールでGoogleMapsEmbedAPIを有効にすることを忘れないでください。

私がこの答えを書いている瞬間にpsは動作をチェックしました

于 2015-07-28T02:57:35.410 に答える
16

PlacesAPIに加えてGoogleMapsembedAPIを有効にしてください。

ここからマップを生成します：

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

于 2014-12-28T15:27:22.277 に答える