web-dev-qa-db-fra.com

Google Maps dans iframe ne se charge pas

J'ai rencontré un problème étrange et je ne sais pas quel est le problème. Le code jQuery suivant est une version simplifiée de ce que je veux réaliser:

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

La carte n'est jamais chargée et l'événement load() n'est jamais déclenché. Chrome signale l'erreur suivante:

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

Comment contourner cela?

Voici une démo jsFiddle .

javascriptjquerygoogle-maps
23
BenM

Ajout de &output=embed à la fin de l'URL résout le problème.

44
BenM

Depuis 2014, l'option &output=embed ne fonctionne plus. Google vous propose de passer à l'API Google Maps Embed. Voici un démarrage rapide .

Fondamentalement, le nouveau lien iframe est:

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

N'oubliez pas d'activer l'API Google Maps Embed dans la console API.

p.s. vérifié fonctionne au moment où j'écris cette réponse

14
Raptor

Assurez-vous d'activer l'API Google Maps intégrée en plus de l'API Google Adresses.

Générez votre carte à partir d'ici:

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

10
redochka