“谷歌未定义”在 Firefox 中远程使用 Google 地图 V3 时

Question

这是我的难题： 我有一个使用 Google Maps V3 和 jQuery 的页面。它在 FF5、Chrome 和 Safari 本地运行良好。

上传到网站后，我在尝试使用 google 对象的第一行收到“google 未定义”错误。

var defaultLocation = new google.maps.LatLng(lat, lng);

它仅发生在 FF 且仅发生在远程< /strong> （即，如果我将文件加载到本地 FF 中，效果很好）。不管怎样，Chrome 和 Safari 似乎都运行良好，我的 Android 和 iPod 浏览器也是如此。

这是我到目前为止所尝试的：

1. 移动
2. 将 $(function() {...}); 的所有内容移至名为 initialize() 的函数，并添加
3. 使用脚本和 css 文件顺序播放
4. 粘贴了 URL http://maps.google.com/maps/api/js?sensor=false 转换为 FF 地址框并验证我得到了合法的脚本

，但由于这仅发生在远程计算机上的 FF 中并且在其他情况下运行良好，我认为它与我的代码没有任何关系。也许FF5中的加载顺序是搞砸的。也许它对网络资源的优先级划分与其他浏览器不同。我现在真的不知道该怎么办。

如有任何帮助，我们将不胜感激。
盖伊

更新：
只是想添加以下事实：在 Mac 上尝试了前一个之后，我在 Windows 中尝试了 FF5，并且复制了完全相同的行为。
为了更好地衡量，我也尝试了 Pale Moon - 相同的结果。 Chrome 14、Opera 11.50 甚至该死的 IE9（未包含在测试计划中）都可以工作。只是现在在 Mac 和 Windows 7 上都运行的 FF5 在该页面上失败了。

Answer 1

尝试使用这个：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

Answer 2

试试这个：

<script src="https://maps.googleapis.com/maps/api/js"></script>

它对我有用......
重点是，将 HTTP 更改为 HTTPS

Answer 3

添加脚本的类型

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>

所以重要的部分是类型text/javascript。

Answer 4

而不是

var defaultLocation = new google.maps.LatLng(lat, lng);

使用

var defaultLocation = new window.google.maps.LatLng(lat, lng);

这个，这对我有用。

Answer 5

从 Firefox 23 开始，默认设置启用混合内容阻止（本地禁用）。如果您使用安全连接和一些不安全的 API，它也会阻止来自 Google 的一些 API。

要禁用它，当存在一些不安全内容时，您必须单击位置栏中出现的盾牌，设置“禁用保护”，然后您必须查看位置栏中的黄色感叹号:(

https://blog.mozilla.org/.../mixed-content-blocking-enabled-in-firefox-23/

您始终可以尝试将 http 协议替换为 https API url。如果 API 也在安全连接中提供 - 您将不会看到任何警告

。

Answer 6

您可以尝试以下操作：

首先，添加async defer。这指定脚本一旦可用且页面完成解析后将异步执行。

其次，将 initMap() 函数添加为 html 内脚本标记中的回调。这样，地图将在 document.ready 和 window.onload 之前初始化：

<script async defer src="{{ 'https://maps.googleapis.com/maps/api/js?key=$key&language='.$language.'®ion='.$country.'&callback=initMap' }}"></script>

<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 4,
            disableDefaultUI: false,
            scrollwheel: false,
            styles: [{ ... }]
        });
    }
</script> 

最后，您可以在 js 文件中使用地图对象。

Answer 7

更改

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"> 
      function(){
            myMap()
                }
</script>

并使其

<script type="text/javascript">
      function(){
            myMap()
                }
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"></script>

有效:)

Answer 8

我认为最简单的技巧是：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap">google.maps.event.addDomListener(window,'load', initMap);</script>

当您的应用程序准备就绪时，它将初始化地图。

检查一下。

Answer 9

请检查您调用的顺序、您的库、以下顺序

2. <脚本类型 = "text/javascript" src = "../resources/googleMaps /jquery-ui.min.js">

3. <脚本类型 = "text/javascript" src="http:// maps.googleapis.com/maps/api/

4. METOD <脚本类型 = "text/javascript" src = "googleMaps/mapa.js">

我遇到了这个问题，我刚刚调整了我的订单。

Answer 10

就我而言，我通过 http 加载 google 脚本，而我的服务器有 SSL 并且通过 https 加载。所以我必须通过 https 加载脚本

Answer 11

我不确定，但这是我最好的建议。

您正在使用 jQuery。因此，您实际上应该使用 $(function() {... }); 而不是设置事件进行初始化。使用此选项的原因是，它可以确保页面上的所有脚本都已加载，并且您不会像使用 onload body 标记那样仅限于一个 init 函数。

另外，请确保您的 Javascript 代码位于 Google 包含之后。否则，您的代码可能会在创建 Google 对象之前执行。

我还建议您查看一下有关事件顺序的页面。

http://dean.edwards.name/weblog/2005/09/busted/

Answer 12

如果您在 API 调用中提到了回调函数，则应该将您的 google 地图代码包装在具有相同名称的 JavaScript 函数中。否则你会得到这个错误。

Answer 13

我多次遇到“谷歌未定义”。
可能 Google Script 有一些问题，无法用 FF-addon 很好地加载
顺便提一句。
FF 有重新启动选项（如窗口重新启动）
帮助>禁用附加组件后重新启动

Answer 14

我在使用 Gmap3 时遇到了同样的错误“google 未定义”。问题是我在包含“google”之前包含了“gmap3”，所以我颠倒了顺序：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/assets/gmap3.js?body=1" type="text/javascript"></script>

Answer 15

另一个对我有帮助的建议：

这是发生在我身上的事情=>我加载页面时，我的脚本每 3 次运行一次，错误是“google 未定义”。

我使用谷歌地图的函数是在我的 jQuery 文档的就绪函数中，

$(function(){
   //Here was my logic
})

我只是添加了这段代码以确保它有效：

$(function(){
   $(window).load(function(){
       //Here is my logic now
   });
});

它就像一个魅力。如果您想了解有关文档就绪和窗口加载之间差异的更多详细信息，这里有一篇很棒的文章：
window.onload 与 $(document).ready()

ready 事件发生在 HTML 文档加载之后，而
onload 事件稍后发生，此时所有内容（例如图像）也已
已加载。

onload事件是DOM中的标准事件，而ready事件
特定于 jQuery。准备事件的目的是
应该在文档加载后尽早发生，所以
向页面中的元素添加功能的代码不会
必须等待所有内容加载。