Question

I can’t seem to get this to work, while I have been doing so in the past, succesfully…

I’m trying to embed a Google Maps iframe in a web page. The iframe won’t load, showing an error message, saying:

Chrome, in console: Refused to display document because display forbidden by X-Frame-Options.

IE9, on the page: This content cannot be displayed in a frame

The steps I take are:

• Go to google maps in the browser
• Go the place I want to have embedded
• Click the link icon
• Copy paste the link that’s presented under the label ‘Paste HTML to embed in website’.

I’m using ASP.NET MVC4, running locally in IIS Express, but the same happens on the server in IIS7.

Strangely enough, when I just create a local HTML file and open that from the filesystem, I don’t have the problem.

When pasting the code in jsfiddle, it does seem to work.

Do I need to configure IIS or add something to my headers, or anything like that?

The HTML snippet

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Kortrijk,+Belgium&amp;aq=0&amp;oq=kortrijk,+bel&amp;sll=50.802805,3.279785&amp;sspn=0.351067,0.617294&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&amp;ll=50.802897,3.280106&amp;spn=0.350496,0.617294&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>

Answer 1

Thanks to the sharp and insightful eye of a colleague of mine, we have found the issue.

First of all it only seems to appear on the Belgian maps, http://maps.google.be, (afaik, obviously), and not on the http://maps.google.com.

When calling the IFRAME content, google redirects the IFRAME content to the same URL, but with ?wmode=transparent appended.

The browser does not allow multiple ‘?’ in a url, so it aborts the action.

To fix:

Use the same URL as generated by Google Maps, but just append the following:

&wmode=transparent