Google Maps im Inneren Iframe nicht geladen

Question

Ich lief in ein seltsames Problem, und ich weiß nicht, was das Problem ist. Die folgende jQuery-Code ist eine vereinfachte Version von dem, was ich erreichen möchte:

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); 
}); 

die Karte nie geladen wird, und das load() Ereignis wird nie ausgelöst. Chrome meldet den folgenden Fehler:

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'.

Wie funktioniert ein Bypass das?

Hier ist ein jsFiddle demo.

Answer 1

Das Anhängen von &output=embed an das Ende der URL behebt das Problem.

Answer 2

Stellen Sie sicher, dass Sie die Google Maps Embed API zusätzlich zu Orten API aktivieren.

Generieren Sie hier Karte:

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

Answer 3

Ab 2014 &output=embed die Option funktioniert nicht mehr. Google empfiehlt Ihnen, zur Google Maps-API für die Einbettung zu wechseln. Hier ist ein Quick Start.

Grundsätzlich ist die neue iframe Link lautet:

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

Erinnern Google Maps Embed API in API-Konsole zu ermöglichen.

p.s. zur Zeit checked Arbeit schreibe ich diese Antwort