The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match

Question

I am trying to use the google map api into my website. According to the google map api developer site all you need to do is add:

<script src="http://maps.googleapis.com/maps/api/js?key={unique key}&sensor=false">
 </script>

My src says "HTTP://" But it keeps changing it to "HTTPS://" and it will not work! Getting the error message: Blocked a frame with origin "https://maps.google.com" from accessing a frame with origin "http://...". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

I am not understanding how I can get the google map api into my http:// website.

Please help!!

Solution

Remove the http: from the frame and refer to it simply as //www.example.com/whatever. This is protocol relative URL and will force the frame to load using the current page scheme.

Comments

[Dr.Molle]

These errors are not related to usage of the Maps-Javascript-API in your page. There is an iframe(an embedded google-map) in the page(it's hidden inside div.contentMobile) . The logged errors are a result of the attempt of the document inside the iframe to access the parent document(your page). You may either ignore these errors(they don't have any effect to your page) or remove the iframe.

[Purefan]

Some sources redirect http to https