jquery：我如何通过ajax加载Google Maps API？ [英] jquery: how can i load the Google Maps API via ajax?

问题描述

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

• 我有一个'show on map'按钮
  点击后会打开
  对话框/灯箱，其中包含Google
  地图。 我不想在$ b上加载地图api $ b pageload，仅当地图已被
  请求时

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

 < div id =map_canvas>< / div> ; 
 
< script type =text / javascript> 
 $（function（）{
 // google maps stuff 
 var latlng = new google.maps.LatLng（<？php echo $ coords？>）; 
 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（ <？php echo $ coords？>），
 map：map 
}）; 
}）
< / script> 
  

我一直试图在ajaxing之前的对话框中加载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 
}）
}）; 
}）
  

这似乎不起作用：（b / b）

我也试过：

• 添加< script src =http://maps.google.com/maps/api/js?sensor =false>< / script>
  到ajax文件 c $ c> $ .getScript（'http://maps.google.com/maps/api/js?sensor=false'）;
  on doc.ready

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

解决方案

此常见问题解答详细说明了如何异步加载Maps API，并且有一个很好的

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

  $ .getJSON（'http://maps.google.com/maps/ api / js？sensor = false& async = 2& callback =？'，function（）{
 $ .colorbox（{
 href：rel 
}）
}）; 
  

Before you reply: this is not as straight foward as you'd expect!

• I have a 'show on map' button which when clicked opens a dialogbox/lightbox with the google map in.
• I don't want to load the maps api on pageload, just when a map has been requested

This is php file the "show on map" button puts into the dialog box:

<div id="map_canvas"></div>

<script type="text/javascript">
    $(function() {  
            //google maps stuff             
            var latlng = new google.maps.LatLng(<?php echo $coords ?>);
            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(<?php echo $coords ?>),
              map: map
            });
    })
</script>

I've been trying to load the API before ajaxing in the dialog like this:

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

this doesn't seem to work :(

i've also tried:

• adding <script src="http://maps.google.com/maps/api/js?sensor=false"></script> to the ajax file
• type="text/javascript" running $.getScript('http://maps.google.com/maps/api/js?sensor=false'); on doc.ready

the problem the browser seems to be redirected to the api.js file - you see a white screen

解决方案

This FAQ answer details how to load the Maps API asynchronously, and there is a good example that goes along with it.

Basically, recommend you put your execution code in a named function, then load the Maps API referencing said callback and using the "async" parameter. Or you could use jQuery's getJSON as such:

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

这篇关于jquery：我如何通过ajax加载Google Maps API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！