Google Chrome refused to display GoogleMaps Frame because X-Frame-Options is set to deny

Question

I'm working on a website for a shop and I'm using the GooleMaps Engine Lite to show his location. It works on IE9 and 10, Safari for Windows, iOS and MacOs and Mozilla Firefox, but it's not working on Chrome. If I use the Javascript Console I can see the following error:

Refused to display 'https://accounts.google.com/ServiceLogin?service=mapsengine&passive=1209600…up=https://mapsengine.google.com/map/embed?mid%3DzehbkDaSW5QM.kyKZHGifzxMc' in a frame because it set 'X-Frame-Options' to 'DENY'.

Could anybody help me?

Answer 1

First time I had the problem it disappeared when I rebooted my computer, but today the problem appeared again. I've read on Google forums that the conflict comes when you are semi-logged with your Google account. If I log out completely my account or log in the map re-starts to work. In Safari you will find the same issue.

A temporary solution is sandbox the map iframe to forbid it to access the cookies.

Answer 2

https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

The counter-question I have to you is why are you implementing that URL in an iframe, when it specifically tells the browser it does not want to be loaded in an iframe?

Did you follow the instructions at https://support.google.com/mapsenginelite/answer/3024935?hl=en when embedding the map?

• Make sure you have your desired map open and that it is set to be accessible by the Public.
• Click the folder button.
• Select Embed on my site.
• In the box that appears, copy the HTML under 'Embed on the web,' and paste it into the source code of your website or blog.