我有一个使用 Google Maps API 显示地图的页面.当我直接加载页面时，地图出现.但是，当我尝试使用 AJAX 加载页面时，出现错误:
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:
Uncaught ReferenceError: google is not defined这是为什么?
这是带有地图的页面:
<script src="ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="maps.googleapis/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 调用的页面:
And this the page with the AJAX call:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="ajax.googleapis/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，需要异步加载.
The API can't be loaded after the document has finished loading by default, you'll need to load it asynchronous.
用地图修改页面:
<div id="map_canvas" style="height: 354px; width:713px;"></div> <script src="ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="maps.googleapis/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>更多详情请看:stackoverflow/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
For more details take a look at: stackoverflow/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834
示例:jsfiddle/doktormolle/zJ5em/
更多推荐
Google Maps API 抛出“Uncaught ReferenceError: google is not defined"仅在使用 AJAX
发布评论