jquery: मैं AJAX के माध्यम से Google मानचित्र API कैसे लोड कर सकता हूं?

Question

जवाब देने से पहले: यह अपेक्षाकृत उतना ही आसान नहीं है जितना आप उम्मीद करेंगे!

• मैं बटन जो जब क्लिक में गूगल नक्शे के साथ एक dialogbox/लाइटबॉक्स खोलता है एक 'मानचित्र पर शो' है।
• मैं pageload पर मैप्स एपीआई लोड करने के लिए नहीं करना चाहते हैं, बस
  : जब एक नक्शा दिया गया है अनुरोध किया

यह php फ़ाइल "नक्शे पर शो" है बटन संवाद बॉक्स में रखता है

<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 से पहले एपीआई लोड करने का प्रयास किया गया है:

$('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 फाइल करने के लिए <script src="http://maps.google.com/maps/api/js?sensor=false"></script> जोड़ने
• type = "text/javascript" चल $.getScript('http://maps.google.com/maps/api/js?sensor=false'); doc.ready

समस्या ब्राउज़र लगता api.js फ़ाइल पर पुनः निर्देशित किया है पर - आप एक सफेद स्क्रीन देख

Answer 1

This FAQ answer विवरण मैप्स एपीआई को असीमित रूप से लोड करने का विवरण देता है, और इसके साथ एक अच्छी example भी है जो इसके साथ चलती है।

असल में, अनुशंसा करते हैं कि आप अपने निष्पादन कोड को नामित फ़ंक्शन में रखें, फिर मैप्स एपीआई संदर्भ कॉन्फ़्रेंसिंग को कॉलबैक और "async" पैरामीटर का उपयोग करके लोड करें। या फिर आप इस तरह के रूप jQuery के getJSON इस्तेमाल कर सकते हैं: मुझे सही दिशा एंड्रयू में ओर इशारा करते हुए के लिए

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

Answer 2

धन्यवाद, मेरी समस्या यह है कि api अनुरोध में कॉलबैक मांग पर एपीआई लोड हो रहा है के लिए अनिवार्य है था।

//in doc.ready 
$('img.map').click(function(){  
    var rel = $(this).attr('rel');  
    $('body').data('map_href', rel).append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=show_map"></script>'); 
}) 


function show_map(){ 
    $.fn.colorbox({ 
     href:$('body').data('map_href') 
    }) 
}