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

Here's my conundrum: I have a page that uses Google Maps V3 and jQuery. It all worked well locally in FF5, Chrome and Safari.

这是我的难题：我有一个使用谷歌地图V3和jQuery的页面。这一切在FF5，Chrome和Safari本地都运行良好。

Once I uploaded to a web site, I get a "google is not defined" error on the first line that I try to use a google object

一旦我上传到网站，我在第一行尝试使用谷歌对象时出现“谷歌未定义”错误

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

It only occurs in FF and only occurs remotely (i.e., if I load the file into FF locally, it works well). Chrome and Safari seem to be working great regardless, as is my Android and iPod browsers.

它只发生在FF中并且只发生在远程（即，如果我在本地将文件加载到FF中，它运行良好）。 Chrome和Safari似乎都很好用，就像我的Android和iPod浏览器一样。

Here's what I tried so far:

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

Moved <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> to top of the <head> section.
已将
Moved all content of $(function() {...}); to a function called initialize() and added <body onload="initialize()">
移动了$（function（）{...}）的所有内容;到一个名为initialize（）的函数，并添加了
Played with scripts and css files order
玩过脚本和css文件的顺序
Pasted the URL http://maps.google.com/maps/api/js?sensor=false into FF address box and verified I'm getting the legit script
将网址http://maps.google.com/maps/api/js?sensor=false粘贴到FF地址框中并验证我已获得合法脚本

But since this is only happening in FF on a remote machine and works well otherwise, I don't think it has anything to do with my code. Maybe the load order in FF5 is screwed. Maybe it prioritizes network resources differently than other browsers. I really do not know what to make of it at this point.

但由于这只发生在远程机器上的FF中，并且运行良好，否则我认为它与我的代码没有任何关系。也许FF5中的加载顺序是拧紧的。也许它比其他浏览器更优先考虑网络资源。我现在真的不知道该怎么做。

Any help is appreciated.
Guy

任何帮助表示赞赏。家伙

Update:
Just wanted to add the following fact: After trying the previous on a Mac, I tried FF5 in Windows, and have replicated the exact same behavior.
For good measure, I tried Pale Moon as well - same results. Chrome 14, Opera 11.50 and even frickin' IE9 (which wasn't included in the test plan) work. It just FF5, now on both Mac and Windows 7, that fails on that page.

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

11 个解决方案

#1

I faced 'google is not defined' several time. Probably Google Script has some problem not to be loaded well with FF-addon BTW. FF has restart option ( like window reboot ) Help > restart with Add-ons Disabled

我好几次面对'谷歌没有定义'。可能谷歌脚本有一些问题不能很好地加载FF-addon BTW。 FF具有重启选项（如窗口重启）帮助>重启，禁用加载项

#2

I had the same error "google is not defined" while using Gmap3. The problem was that I was including 'gmap3' before including 'google', so I reversed the order:

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

#3

Another suggestion that helped me:

另一个帮助我的建议：

Here is what happent to me => My script was working once in 3 time I was loading the page and the error was the «google is not defined».

这是我发生的事情=>我的脚本在3次加载页面时工作一次，错误是“谷歌没有定义”。

My function using the google map was in my jQuery document's ready function

我使用谷歌地图的功能是在我的jQuery文档的ready函数中

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

I simply added this code to make sure it works:

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

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

It works like a charm. If you want more details on difference between document ready and window load, here is a great post about it: window.onload vs $(document).ready()

它就像一个魅力。如果你想了解有关文档就绪和窗口加载之间差异的更多细节，这里有一篇很棒的帖子：window.onload vs $（document）.ready（）

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

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

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

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

#4

Try using this:

试试这个：

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

#5

try this:

尝试这个：

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

it works for me... the point is, change HTTP to HTTPS

它适用于我......重点是，将HTTP更改为HTTPS

#6

Add the type for the script

添加脚本的类型

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

So the important part is the type text/javascript.

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

#7

From Firefox 23, there is Mixed Content Blocking Enabled set by default (locally disabled). It blocks some APIs from Google also if you use secure connection and some unsecure APIs.

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

To disable it you'll have to click shield which appears in location bar when there are some unsecure contents, set 'Disable protection' and then you'll have to look at yellow exclamation mark in location bar :(

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

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

You can always try also replace http protocol with https in the API url. If API is provided also in secure connection - you will not see any warnings.

您也可以尝试在API网址中使用https替换http协议。如果API也以安全连接方式提供 - 您将看不到任何警告。

It works for me.

这个对我有用。

#8

You can try the following:

您可以尝试以下方法：

First, add async defer. This specifies that the script will be executed asynchronously as soon as it is available and when the page has finished parsing.

首先，添加异步延迟。这指定脚本在可用时以及页面完成解析后将立即异步执行。

Second, add the initMap() function as a callback in a script tag inside your html. In this way the map will be initialized before the document.ready and window.onload:

其次，将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>

Finally, you can use the map object inside your js files.

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

#9

I don't know for sure but here are my best suggestions.

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

You're using jQuery. So instead of setting the event you should really be using $(function() {... }); to do your initialization. The reason to use this is that it ensures that all the scripts on the page have loaded and you're not limited to just one init function like you are with the onload body tag.

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

Also, be sure your Javascript code is after the Google include. Otherwise your code might execute before the Google objects are created.

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

I would also suggest taking a look at this page about event order.

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

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

#10

Please check the order you are calling, your libraries, the following order

请检查您的订单，图书馆，以下订单

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

METOD

I was with this problem, I just adjusted my order.

我遇到了这个问题，我只是调整了订单。

#11

Changed the

改变了

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

and made it

并成功了

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

It worked :)

有效：）

#1