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!!

Answer 1

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.