0

I have my page which has a google map in the middle. It works if I load the page thats saved on my on desktop but not if i load from my dropbox for Chrome or IE. It only works in FireFox. Can anyone tell me why?

https://dl.dropbox.com/u/32241044/Blue%20Wolf%20Coding/page.html

taormania
  • 621
  • 2
  • 8
  • 17

2 Answers2

3

Check out the developer console in Chrome and you'll see the following message:

[blocked] The page at https://dl.dropbox.com/u/32241044/Blue%20Wolf%20Coding/page.html ran insecure content from http://maps.googleapis.com/maps/api/js?key=AIzaSyDoXopD-LqdzB0iH92fs09t_YDjyo9rX_4&sensor=true.

This means that Dropbox prevented the Google Maps API from loading. When you're running the page locally, you're accessing it with an HTTP URL, but Dropbox has SSL on it. Change your include of the Google Maps API to include the HTTPS version:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true"></script>
rekamoyka
  • 1,104
  • 11
  • 15
0

You need to use protocol-relative paths like this:

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

check this answer:

How to Include CSS and JS files via HTTPS when needed?

Community
  • 1
  • 1
nickfox
  • 2,858
  • 1
  • 23
  • 31