远程在 Firefox 中使用 Google Maps V3 时出现“未定义 google”答案

【问题标题】："google is not defined" when using Google Maps V3 in Firefox remotely远程在 Firefox 中使用 Google Maps V3 时出现“未定义 google”
【发布时间】：2011-10-03 09:47:58
【问题描述】：

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

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

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

它只发生在FF中和只发生在远程（即，如果我将文件加载到本地FF，它工作得很好）。 Chrome 和 Safari 似乎运行良好，我的 Android 和 iPod 浏览器也是如此。

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

将<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 移至<head> 部分的顶部。
将$(function() {...}); 的所有内容移动到名为initialize() 的函数中并添加了<body onload="initialize()">
按脚本和 css 文件顺序播放
将 URL http://maps.google.com/maps/api/js?sensor=false 粘贴到 FF 地址框中并验证我得到的是合法脚本

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

任何帮助表示赞赏。
伙计

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

【问题讨论】：

@thephpdeveloper +1 @op:你有网址吗？ firebug 报告了这个？
@the 当然，直到 Jon Skeet 或 Chuck Norris unset google。
@deceze：在安全问题上错过 Bruce Schneier 是一种侮辱。 :)
@naveen 是的，我用 Firebug 发现了这一点（“参考错误：未定义谷歌”。我很欣赏 Chuck Norris 的笑话，就像下一个遇到无法解释的问题的人一样，但是...... :)
我遇到了同样的问题。如果我将谷歌脚本放入一个简单的 html 中，它可以工作，但如果我放入我的网页（aspx），它就不起作用。我得到错误：谷歌没有定义。看我的剧本。我把我的脚本放在第一行这样：<asp:Content ContentPlaceHolderID="ScriptRegion" runat="server"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=my_key" async defer></script>

标签： javascript firefox google-maps cross-browser

【解决方案1】：

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

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

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

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

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

【讨论】：

Paul，我已经在使用 $(function(){}) 作为我的加载函数。我的 JS 代码在 Google 包含之后很好。我实际上将它移到了顶部，甚至在 jQuery 包含之上 - 不高兴。

【解决方案2】：

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

【讨论】：

干得好！我实际上设法找到了导致问题的附加组件！它被称为“断开连接”，它可能会故意篡改 Google 库。有趣的是，我也在 Chrome 中安装了 Disconnect，尽管没有问题。仍然 - 好答案！
AdBlock 似乎也屏蔽了 Google API。
很棒的答案，减轻了我的头痛。
您可以在 chrome 中使用新的隐身窗口和在 firefox 中使用新的私有窗口进行测试

【解决方案3】：

试试这个：

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

【讨论】：

你写的和我的第 1 步有什么区别？
这个答案仍然有效
在您的页面<script src="https://maps.googleapis.com/maps/api/js" async defer></script> 上包含 GMap 的新方法会导致问题，因为它的加载将被延迟，以免成为阻塞资源。这有一种尴尬的可能性，即在 GMaps 初始化之前将包含其他脚本。因此，上述解决方案是正确的。谢谢你。

【解决方案4】：

我在使用 Gmap3 时遇到了同样的错误“谷歌未定义”。问题是我在包含“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>

【讨论】：

【解决方案5】：

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

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

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

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

它对我有用。

【讨论】：

【解决方案6】：

试试这个：

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

它对我有用... 关键是，将 HTTP 更改为 HTTPS

【讨论】：

【解决方案7】：

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

这是发生在我身上的事情 => 我的脚本在 3 次加载页面时运行一次，错误是 «google is not defined»。

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

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

我只是添加了这段代码以确保它可以正常工作：

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

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

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

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

【讨论】：

谷歌有一个很好的例子here。他们通过异步和回调解决问题

【解决方案8】：

为脚本添加类型

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

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

【讨论】：

从上面的答案可以看出，原因实际上是一个广告拦截插件。现代浏览器并不严格要求添加脚本类型。

【解决方案9】：

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

<script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.js"></script>
<script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.min.js"></script>
<script type = "text/javascript" src="http://maps.googleapis.com/maps/api/
METOD <script type = "text/javascript" src = "googleMaps/mapa.js"></script>

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

【讨论】：

【解决方案10】：

您可以尝试以下方法：

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

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

<script async defer src="{{ 'https://maps.googleapis.com/maps/api/js?key=$key&language='.$language.'&region='.$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 文件中使用地图对象。

【讨论】：

【解决方案11】：

改了

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

成功了:)

【讨论】：

诀窍是'key = API'字段。 Google 地图脚本的加载方式已更改，并且在没有 API 密钥的情况下不再工作。

【解决方案12】：

在我的情况下，我通过 http 加载 google 脚本，而我的服务器具有 SSL 并且它通过 https 加载。所以我不得不通过 https 加载脚本

【讨论】：

【解决方案13】：

我认为最简单的技巧是：

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

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

Check this.

【讨论】：

【解决方案14】：

而不是这个

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

使用这个

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

这对我有用。

【讨论】：

没有区别。

【解决方案15】：

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

【讨论】：