Javascript 在 Firefox 中远程使用 Google Maps V3 时“未定义 google”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6660955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"google is not defined" when using Google Maps V3 in Firefox remotely
提问by Traveling Tech Guy
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.
这是我的难题：我有一个使用 Google Maps 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
上传到网站后，我在尝试使用 google 对象的第一行收到“未定义 google”错误
var defaultLocation = new google.maps.LatLng(lat, lng);
It only occurs in FFand 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 calledinitialize()and added<body onload="initialize()"> - Played with scripts and css files order
- Pasted the URL http://maps.google.com/maps/api/js?sensor=falseinto FF address box and verified I'm getting the legit script
- 移至
<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 地址框中并验证我正在获取合法脚本
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 甚至该死的 IE9（未包含在测试计划中）都可以工作。它只是 FF5，现在在 Mac 和 Windows 7 上都在该页面上失败。
采纳答案by user841019
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
我多次遇到“未定义谷歌”。可能 Google Script 存在一些问题，无法很好地加载 FF 插件 BTW。FF 有重新启动选项（如窗口重新启动）帮助 > 禁用附加组件重新启动
回答by Diego Pino
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' 之前包含了 '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>
回答by Yann Chabot
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 次工作一次，错误是 ?google is not defined?。
My function using the google map was in my jQuery document's ready function
我使用谷歌地图的函数在我的 jQuery 文档的就绪函数中
$(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.
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.
ready 事件在 HTML 文档加载后发生，而 onload 事件发生在稍后，当所有内容（例如图像）也已加载时。
onload 事件是 DOM 中的标准事件，而 ready 事件是特定于 jQuery 的。ready 事件的目的是它应该在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待所有内容加载完毕。
回答by Hrishikesh Choudhari
Try using this:
尝试使用这个：
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
回答by Julz
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 类型。
回答by danisupr4
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
回答by robson
From Firefox 23, there is Mixed Content Blocking Enabledset 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/
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 url 中用 https 替换 http 协议。如果 API 也在安全连接中提供 - 您将不会看到任何警告。
It works for me.
这个对我有用。
回答by tsveti_iko
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.
首先，添加async defer. 这指定脚本将在它可用并且页面完成解析时异步执行。
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 中的脚本标记中。这样地图会在 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>
Finally, you can use the map object inside your js files.
最后，您可以在 js 文件中使用 map 对象。
回答by Abhinav Anand
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 :)
有效 ：）
回答by Yinka
In my case I was loading the google script via http while my server had SSL and its being loaded over https. So I had to load script via https
在我的情况下，我通过 http 加载谷歌脚本，而我的服务器有 SSL 并通过 https 加载。所以我不得不通过https加载脚本
