web-dev-qa-db-ja.com

iframe内のGoogleマップが読み込まれない

私は奇妙な問題に遭遇しました、そして、私は問題が何であるかわかりません。次の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 demo です。

javascriptjquerygoogle-maps
23
BenM

2014年時点で、オプション&output=embedはもう機能しません。 Googleは、Google Maps Embed APIに切り替えることをお勧めします。 クイックスタート です。

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

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

APIコンソールでGoogle Maps Embed APIを必ず有効にしてください。

p.s。この答えを書いた瞬間に動作を確認しました

14
Raptor

Places APIに加えて、Googleマップの埋め込みAPIを必ず有効にしてください。

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

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

10
redochka