jquery：我如何通过ajax加载Google Maps API？

在你回答之前：这并不像你期望的那样直截了当！

• 我有一个’在地图上显示’按钮，当点击它时打开一个带有谷歌地图的对话框/灯箱。
• 我不想在页面加载时加载地图api，就在请求地图时

这是php文件“show on map”按钮放入对话框：

  $(function() { //google maps stuff var latlng = new google.maps.LatLng(); var options = { zoom: 14, center: latlng, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), options); var marker = new google.maps.Marker({ position: new google.maps.LatLng(), map: map }); })  

我一直在尝试在对话框中加载API之前加载API，如下所示：

 $('img.map').click(function(){ var rel = $(this).attr('rel'); $.getScript('http://maps.google.com/maps/api/js?sensor=false', function(){ $.fn.colorbox({ href:rel }) }); }) 

这似乎不起作用:(

我也尝试过：

• 将到ajax文件
• type =“text / javascript”运行$.getScript('http://maps.google.com/maps/api/js?sensor=false'); 在doc.ready上

浏览器似乎被重定向到api.js文件的问题 – 你看到一个白色的屏幕

Answer 1

此FAQ答案详细说明了如何异步加载Maps API，并且有一个很好的例子 。

基本上，建议您将执行代码放在命名函数中，然后加载引用所述回调并使用“async”参数的Maps API。 或者您可以使用jQuery的getJSON：

 $.getJSON('http://maps.google.com/maps/api/js?sensor=false&async=2&callback=?', function(){ $.colorbox({ href:rel }) }); 

Answer 2

谢谢你指出我正确的方向安德鲁，我的问题是api请求中的回调是强制性的加载api按需。

这是我最后的jquery代码：

 //in doc.ready $('img.map').click(function(){ var rel = $(this).attr('rel'); $('body').data('map_href', rel ).append(''); }) function show_map(){ $.fn.colorbox({ href:$('body').data('map_href') }) }