Google Maps inside iframe not loading

Question

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.

score 57 · Accepted Answer · edited Aug 24 '20 at 11:32

57

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.

edited Aug 24 '20 at 11:32

OXiGEN

2,041
25
19

answered Mar 13 '13 at 15:14

BenM

52,573
26
113
168

12

@pomarc that doesn't warrant a downvote. When the answer was posted more than a year ago, this was valid. Please consider rescinding your harsh downvote... – BenM Jul 25 '14 at 20:29
1

Even in 2020, the output=embed trick still works in practice. I'm using it right now and it's working. – Alejandro May 21 '20 at 17:01
2

I can confirm that in Nov 2020 output=embed is no longer working. – Vincent Nov 12 '20 at 16:57

score 22 · Answer 2 · answered Jul 28 '15 at 02:57

22

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

answered Jul 28 '15 at 02:57

Raptor

53,206
45
230
366

Does not work for me with `/dir` directions (not `/place`) – kaiser Aug 21 '15 at 09:13
1

Hi @kaiser , following the setup wizard [here](https://developers.google.com/maps/documentation/embed/start), the the last piece of URL should be `/directions` instead of `/dir` – Raptor Aug 21 '15 at 09:34
I don't understand this logic (Google's, not yours). Do I *have* to have a Google Developers account now in order to embed-share a map? – WoodrowShigeru Oct 20 '15 at 15:15
Yes @WoodrowShigeru . – Raptor Feb 20 '17 at 02:58
Why? Google Developers Account is free. – Raptor Feb 20 '17 at 10:45
1

@WoodrowShigeru yeah, so they can have your data and spam you with products offers...gosh they are doing this to my customers, it's a living hell... – Marcelo Agimóvel Mar 13 '17 at 17:52
I am using a Javascript/Jquery pretty photo slider to show some pictures. After 6 pictures, I am showing a 7th picture of the google map, clicking on which should show the Google map in a popup. I am getting the same error as the original user. If I change the URL in https://maps.googleapis.com/maps/api/staticmap?center=42.579895%2C-88.46074&markers=42.579895%2C-88.46074&zoom=17&maptype=roadmap&iframe=true&height=600&key=xxx to www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED} will it show the maps in a popup? Do I have to enable Google Maps Embed API ? – user972391 Jun 15 '17 at 02:30
2

@MarceloAgimóvel It's a completely free map service in return for an email address. Seems like a fair price – Chuck Le Butt Jun 10 '20 at 17:16
@Chuck Le Butt Google also offers free email addresses in return for the time it takes to fill out a form. Pairs well with the free maps service. – OXiGEN Aug 24 '20 at 09:00

score 17 · Answer 3 · answered Dec 28 '14 at 15:27

17

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

answered Dec 28 '14 at 15:27

redochka

12,345
14
66
79

This solution works now, please change the accepted solution. – mdikici Nov 22 '18 at 08:07

score -1 · Answer 4 · answered Aug 28 '22 at 14:18

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/

score -2 · Answer 5 · answered Mar 18 '22 at 21:42

-2

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

answered Mar 18 '22 at 21:42

zyro

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31324110) – Bernardo Marques Mar 22 '22 at 13:48

Google Maps inside iframe not loading

5 Answers5

Linked