Google Maps wewnątrz iframe nie ładowanie

Question

Wpadłem na dziwny problem i nie wiem, jaki jest problem. Poniższy kod jQuery jest uproszczoną wersją tego, co chcę osiągnąć:

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

Mapa nie jest załadowany, a zdarzenie load() nie jest wyzwalany. Chrome zgłasza następujący błąd:

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

Jak można ominąć ten?

Oto jsFiddle demo.

Answer 1

Dołączanie &output=embed na końcu adresu URL rozwiązuje problem.

Answer 2

Upewnij się, że oprócz API miejsca, masz również wbudowany interfejs API map Google.

Generowanie mapowania stąd:

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

Answer 3

Począwszy od roku 2014, opcja &output=embed już nie działa. Google sugeruje przejście na interfejs API Map Google. Oto Quick Start.

Zasadniczo, nowy związek iframe jest:

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

Pamiętaj, aby umożliwić Google Maps API HTML w konsoli API.

p.s. sprawdziłem, czy w tej chwili nie piszę tej odpowiedzi: