Embedded Google Maps Error - Blocked a frame with origin

Question

I am trying to embed a Google map on a client's site.

Here is the embed code I am using as copied from the view source of the page where it is embedded. I followed the instructions from this page http://maps.google.ca/help/maps/getmaps/plot-one.html

<iframe width="180" height="250" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=
&q=5590+Joliet+Street+Denver,+Colorado+88239&aq=&sll=34.168218,-111.930907
&sspn=15.047206,26.30127&ie=UTF8&hq=&hnear=5590+Joliet+St,+Denver,+Colorado
+80239&ll=39.797915,-104.860812&spn=0.013667,0.025685&t=m&z=14&output=embed">
</iframe>

I am getting the error (Chrome Developer Tools, Console) Blocked a frame with origin "http://maps.google.com" from accessing a frame with origin "http link here". Protocols, domains, and ports must match." and no map displays.

Interestingly, when I paste that into a text document and save it as HTML and open it in Chrome, the map will display, but I still get the same error in Dev Tools (except that the origin is null).

the application is php and I've tried the remove_header(); option and it didn't change anything, and I've made sure the link in the iframe contains output=embed.

I have tried FF, Chrome and IE 10, all with the same result.

Here is a link to the page in question. (can't post IP address link) 198 dot 154 dot 220 dot 143/contact/

Gaeta

Ignore the error, there isn't anything you can change because the error is forced by google. This error doesn't prevent the map from loading, the reason why you don't see the map is the css at line 42: iframe{display:none;} – Milissamilissent

I didn't see that. Thanks. – Gaeta

Answer 1

Your protocols are mismatched, https vs. http. I just saw all of the console errors showing on the page you posted, and they all show the google maps links as https and your site is http.

This has popped up a few times on SO, and a recurring suggestion is to use the Google Maps API instead.

Getting http/https protocols to match with <iframe> for maps.google.com

Kohler

Answer 2

There is a bug in Chrome that will stop embedded maps showing at the moment. The way around it is to use the maps API directly rather than embedding. See this question for more details and solution

https://mcmap.net/q/566339/-getting-http-https-protocols-to-match-with-lt-iframe-gt-for-maps-google-com

Detestable

Answer 3

I think you should set correct X-Frame-Options header.

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

Overmatch

I think this is on the other end. In other words I think this is something that Google would need to set on their end? – Gaeta

Answer 4

Missing the "s" in https, this is the correct code to use:

<iframe width="150" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=5590%2BJoliet%2BStreet%2BDenver,%2BColorado&amp;sll=37.0625,-95.677068&amp;sspn=55.718442,121.201172&amp;ie=UTF8&amp;hq=&amp;hnear=5590+Joliet+St,+Denver,+Colorado+80239&amp;t=m&amp;ll=39.79792,-104.860811&amp;spn=0.016486,0.012789&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>

Il

BTW you can change the iwloc parameter to be near so that you don't get the address bubble, you have a very small map (180 x 250): change &amp;iwloc=A to &amp;iwloc=near in the URL. Also...I noticed I made it 150px wide instead of 180px...you can change that as well – Il