只有使用AJAX时，Google Maps API才会抛出“Uncaught ReferenceError：google未定义”
我有一个使用Google Maps API显示地图的页面。 当我直接加载页面，地图出现。 但是，当我尝试使用AJAX加载页面，我得到的错误：
Uncaught ReferenceError: google is not defined 为什么是这样？
这是地图上的页面：
<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>
而这个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>
谢谢你的帮助。
文档在默认加载完成后无法加载API，需要asynchronous加载。
用地图修改页面：
<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>
有关更多详细信息，请参阅： https : //stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
例如： http : //jsfiddle.net/doktormolle/zJ5em/
我知道这个答案是不是直接关系到这个问题的问题，但在某些情况下，“未捕获的ReferenceError：谷歌没有定义”的问题将发生，如果您的js文件被调用谷歌地图API之前，你正在使用…所以不要这样做：
<script type ="text/javascript" src ="SomeJScriptfile.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
猜测，你正在初始化一些东西在你的初始化函数之前： var directionsService = new google.maps.DirectionsService();
将其移入该函数，因此在加载页面之前不会尝试执行它。
var directionsDisplay, directionsService; var map; function initialize() { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer();
为了我
添加这一行
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
在这一行之前。
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
工作
也许使用
<body onload="initialize();">
代替
$(function(){ initialize(); });
可以帮你。
可能不适合每个人，但这个小细节导致我的工作不上class：
从这个改变div：
<div class="map">
对此：
<div id="map">
