谷歌地图api 3不会在Chrome或IE中显示

Question

我的页面中间有一张谷歌地图。如果我加载保存在桌面上的页面，但是如果我从我的Dropbox加载Chrome或IE，则无效。它只适用于FireFox。谁能告诉我为什么？

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

Answer 1

在Chrome中查看开发者控制台，您会看到以下消息：

[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.

这意味着Dropbox阻止了Google Maps API的加载。当您在本地运行页面时，您使用HTTP URL访问它，但Dropbox上有SSL。更改Google Maps API的附加内容以包含HTTPS版本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true"></script>

Answer 2

您需要使用这样的协议相对路径：

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

检查这个答案：

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