'Google Maps inside iframe not loading

I ran into a strange issue, and I don't know what the problem is. The following jQuery code is a simplified version of what I want to achieve:

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

The map is never loaded, and the load() event is never triggered. Chrome reports the following error:

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

How does one bypass this?

Here's a jsFiddle demo.

Solution 1:^[1]

Appending &output=embed to the end of the URL fixes the problem.

Update: Google disabled this feature, which was working at the time the answer was originally posted. This solution no longer works.

Solution 2:^[2]

As of 2014, the option &output=embed does not work anymore. Google suggests you to switch to Google Maps Embed API. Here is a Quick Start.

Basically, the new iframe link is:

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

Remember to enable Google Maps Embed API in API Console.

p.s. checked working at the moment I write this answer

Solution 3:^[3]

Make sure you enable the google maps embed api in addition to places API.

Generate you map from here:

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

Solution 4:^[4]

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>

but it refused to connect It refused even when I put it into CodePen

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	OXiGEN
Solution 2	Raptor
Solution 3	redochka
Solution 4	zyro

'Google Maps inside iframe not loading

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]