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:
我有一个使用谷歌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.
谢谢你的帮助。
6 个解决方案
#1
67
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://*.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
更多细节请看:https://*.com/questions/14184956/async-google-maps-api- api-v3 undefin- is-not-a-function/14185834#14185834
Example: http://jsfiddle.net/doktormolle/zJ5em/
例如:http://jsfiddle.net/doktormolle/zJ5em/
#2
33
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:
我知道这个答案与这个问题没有直接关系,但在某些情况下,如果在使用的谷歌maps api之前调用js文件,就会出现“未捕获的ReferenceError:谷歌未定义”问题。所以不要这样做:
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
#3
5
At a guess, you're initialising something before your initialize function: var directionsService = new google.maps.DirectionsService();
猜猜看,在初始化函数:var directionsService =新的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();
#4
0
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
工作
#5
0
Maybe using
也许使用
<body onload="initialize();">
instead of
而不是
$(function(){
initialize();
});
can help you.
可以帮助你。
#6
0
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">
#1
67
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://*.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
更多细节请看:https://*.com/questions/14184956/async-google-maps-api- api-v3 undefin- is-not-a-function/14185834#14185834
Example: http://jsfiddle.net/doktormolle/zJ5em/
例如:http://jsfiddle.net/doktormolle/zJ5em/
#2
33
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:
我知道这个答案与这个问题没有直接关系,但在某些情况下,如果在使用的谷歌maps api之前调用js文件,就会出现“未捕获的ReferenceError:谷歌未定义”问题。所以不要这样做:
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
#3
5
At a guess, you're initialising something before your initialize function: var directionsService = new google.maps.DirectionsService();
猜猜看,在初始化函数:var directionsService =新的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();
#4
0
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
工作
#5
0
Maybe using
也许使用
<body onload="initialize();">
instead of
而不是
$(function(){
initialize();
});
can help you.
可以帮助你。
#6
0
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">