Google Maps im Iframe wird nicht geladen

Lesezeit: 3 Minuten

BenM

Ich bin auf ein seltsames Problem gestoßen, und ich weiß nicht, was das Problem ist. Der folgende jQuery-Code ist eine vereinfachte Version dessen, 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 wird nie geladen, und die load() Ereignis wird nie ausgelöst. Chrome meldet 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 umgeht man das?

Hier ist ein jsFiddle-Demo.

BenM

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

Aktualisieren: Google hat diese Funktion deaktiviert, die zum Zeitpunkt der ursprünglichen Veröffentlichung der Antwort funktionierte. Diese Lösung funktioniert nicht mehr.

@pomarc das rechtfertigt keine Ablehnung. Als die Antwort vor mehr als einem Jahr veröffentlicht wurde, war dies gültig. Bitte erwägen Sie, Ihre harte Ablehnung zurückzunehmen …

– BenM

25. Juli 2014 um 20:29 Uhr
Auch im Jahr 2020 funktioniert der Output=embed-Trick in der Praxis noch. Ich benutze es gerade und es funktioniert.

– Alejandro

21. Mai 2020 um 17:01 Uhr
Ich kann bestätigen, dass output=embed im November 2020 nicht mehr funktioniert.

– Vinzenz

12. November 2020 um 16:57 Uhr

Ab 2014 die Option &output=embed funktioniert nicht mehr. Google schlägt Ihnen vor, zur Google Maps Embed API zu wechseln. Hier ist ein Schnellstart.

Grundsätzlich lautet der neue Iframe-Link:

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

Denken Sie daran, es zu aktivieren Google Maps-Einbettungs-API in der API-Konsole.

ps überprüft, ob ich im Moment arbeite, in dem ich diese Antwort schreibe

Funktioniert bei mir nicht mit /dir Richtungen (nicht /place)

– Kaiser

21. August 2015 um 9:13 Uhr
Hallo @kaiser , folge dem Einrichtungsassistenten hierdas letzte Stück der URL sein sollte /directions Anstatt von /dir

– Raubvogel

21. August 2015 um 9:34 Uhr
Ich verstehe diese Logik nicht (die von Google, nicht deine). Tu ich haben jetzt ein Google Developers-Konto haben, um eine Karte einzubetten und zu teilen?

– Woodrow Shigeru

20. Oktober 2015 um 15:15 Uhr
@WoodrowShigeru ja, damit sie Ihre Daten haben und Sie mit Produktangeboten zuspammen können … meine Güte, sie tun das meinen Kunden an, es ist die Hölle auf Erden …

– Marcelo Agimovel

13. März 2017 um 17:52 Uhr
@MarceloAgimóvel Es ist ein völlig kostenloser Kartendienst im Gegenzug für eine E-Mail-Adresse. Scheint ein fairer Preis zu sein

– Chuck Le Butt

10. Juni 2020 um 17:16 Uhr

Stellen Sie sicher, dass Sie zusätzlich zur Places-API die Google Maps-Einbettungs-API aktivieren.

Erstellen Sie Ihre Karte von hier aus:

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

Diese Lösung funktioniert jetzt, bitte ändern Sie die akzeptierte Lösung.

– mdikici

22. November 2018 um 8:07 Uhr

I've run this:

      <head>
        <title>Top Secret Route</title>
      </head>
      <div>
        <div>
          <embed width="1000px" height="1000px" frameborder="3px" style="border: 0px" src="https://www.google.com/maps/embed/directions?Moscow&destination=StBasil,Moscow&key=API-KEY">
          <button onclick="<embed>" ondbclick="<div>">embed</button>
          </embed>
        </div>

      </html>

aber es weigerte sich, eine Verbindung herzustellen. Es verweigerte sich sogar, als ich es in CodePen einlegte

11589700cookie-checkGoogle Maps im Iframe wird nicht geladen

#Abfrage #Google Maps #Javascript