仅在使用 AJAX 时，Google Maps API 才会抛出“Uncaught ReferenceError: google is not defined”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14229695/
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 Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX
提问by greener
I have a page that uses the Google Maps API to display a map. When I load the page directly, the map appears. However, when I try to load the page using AJAX, I get the error:
我有一个使用 Google Maps API 显示地图的页面。当我直接加载页面时，地图出现。但是，当我尝试使用 AJAX 加载页面时，出现错误：
Uncaught ReferenceError: google is not defined
Why is this?
为什么是这样？
This is the page with the map:
这是带有地图的页面：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
$(document).ready(function(e) { initialize() });
</script>
<div id="map_canvas" style="height: 354px; width:713px;"></div>
And this the page with the AJAX call:
这是带有 AJAX 调用的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
$('button').click(function(){
$.ajax({
type: 'GET', url: 'map-display',
success: function(d) { $('#a').html(d); }
})
});
});
</script>
<button>Call</button>
<div id="a"></div>
</body>
</html>
Thanks for your help.
谢谢你的帮助。
回答by Dr.Molle
The API can't be loaded after the document has finished loading by default, you'll need to load it asynchronous.
文档加载完成后默认无法加载API，需要异步加载。
modify the page with the map:
用地图修改页面：
<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
directionsService,
map;
function initialize() {
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
</script>
For more details take a look at: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
有关更多详细信息，请查看：https: //stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
回答by Rex CoolCode Charles
I know this answer is not directly related to this questions' issue but in some cases the "Uncaught ReferenceError: google is not defined" issue will occur if your js file is being called prior to the google maps api you're using...so DON'T DO this:
我知道这个答案与这个问题的问题没有直接关系，但在某些情况下，如果在您使用的 google maps api 之前调用您的 js 文件，则会出现“未捕获的 ReferenceError：google 未定义”问题...所以不要这样做：
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
回答by duncan
At a guess, you're initialising something before your initialize function:
var directionsService = new google.maps.DirectionsService();
猜测，您在初始化函数之前初始化了一些东西：
var directionsService = new google.maps.DirectionsService();
Move that into the function, so it won't try and execute it before the page is loaded.
将它移到函数中，这样它就不会在页面加载之前尝试执行它。
var directionsDisplay, directionsService;
var map;
function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
回答by Sohan Jangid
Uncaught ReferenceError: google is not defined error will be gone when removed the async deferfrom the map API script tag.
从地图 API 脚本标签中删除异步延迟时，未捕获的 ReferenceError: google is not defined 错误将消失。
回答by Fotini Pipi
What worked for me after following all your workarounds was to call the API:
在遵循所有解决方法后对我有用的是调用 API：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
type="text/javascript"></script>
before my : <div id="map"></div>
在我之前： <div id="map"></div>
I am using .ASP NET (MVC)
我正在使用 .ASP NET (MVC)
回答by Rupesh
For me
为了我
Adding this line
添加这一行
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Before this line.
在这条线之前。
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
worked
工作过
回答by Hyman Riminton
Might not be relevant for everyone but this little detail was causing mine not to work:
可能并不适用于所有人，但这个小细节导致我的无法正常工作：
Change div from this:
从此更改div：
<div class="map">
To this:
对此：
<div id="map">
回答by rotring05
Maybe using
也许使用
<body onload="initialize();">
instead of
代替
$(function(){
initialize();
});
can help you.
能帮你。
