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/

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