CODEWITHSUNDEEP
javascriptjquerygoogle-maps
BenM
BenM

Reputation: 53246

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.

Upvotes: 32

Views: 72393

Answers (6)

NRDev
NRDev

Reputation: 3

I had a similar issue and it was very unclear why. Turns out I had a space in the embed src url... So instead of https://www.google.com/maps/embed/v1/place?q=Sydney,Australia&key=<myKey> I was building the string in PHP and had a newline character in the string accidentally

$apiKey = 'mySecretKey';
return 'https://www.google.com/maps/embed/v1/place 
?q=Sydney,Australia&key='.$apiKey;

I solved it by concatenating the strings instead

$apiKey = 'mySecretKey';
return 'https://www.google.com/maps/embed/v1/place'.
'?q=Sydney,Australia&key='.$apiKey;

Upvotes: 0

Kyle
Kyle

Reputation: 302

I came across this issue today, and found that it was a single chrome extension that was blocking the map from loading for me.

My solution was to disable all extensions, then enable them one-by-one to see which (if any) were causing the issue.

Your chrome extensions can be found here: chrome://extensions/

Upvotes: -1

zyro
zyro

Reputation: 1

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

Upvotes: -2

BenM
BenM

Reputation: 53246

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.

Upvotes: 63

Raptor
Raptor

Reputation: 54268

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

Upvotes: 23

redochka
redochka

Reputation: 12839

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

Upvotes: 17

Related Questions