Async Google Maps API v3 अपरिभाषित कोई फ़ंक्शन नहीं है

Question

मैं एक ऐप लिख रहा हूं जो एक हाथ से निर्मित ढांचे के साथ Google मानचित्र को असीमित रूप से लोड करता है।
जब मैं नक्शे लोड करता हूं तो यह किसी भी कारण से इसे लोड नहीं करेगा और मैं Uncaught TypeError: undefined is not a function के साथ समाप्त हो जाऊंगा। मैंने क्रोम इंस्पेक्टर की जांच की और पाया कि google.maps एक मान्य वस्तु है, लेकिन इसमें इसकी कोई भी संपत्ति नहीं है। दस्तावेज लोड होने के बाद मैं मैन्युअल रूप से "प्रारंभिक कार्य" को कॉल करता हूं। मैं क्या गलत कर रहा हूं?!

Answer 1

आप अच्छी तरह से ज्ञात यूआरएल (http://maps.googleapis.com/maps/api/js?v=3&sensor=false)

जब आप स्क्रिप्ट फ़ाइल पर एक नज़र डालें, तो आप देखेंगे के साथ नक्शे-एपीआई अतुल्यकालिक लोड नहीं कर सकता, जिसका इस API नहीं है कि लोड हो जाता है, यह एक लोडर है जो एपीआई लोड करता है। लोडर document.write() का उपयोग करता है, जो आपको दस्तावेज़ लोड होने के बाद बुलाए जाने पर अप्रत्याशित परिणामों का नेतृत्व करेगा।

इसके अलावा दस्तावेज़ की ऑनलोड-घटना एसिंक्रोनस लोड ऑब्जेक्ट्स की प्रतीक्षा नहीं करती है, यह बहुत तेज़ी से आ सकती है।

आप प्रारंभिक-फ़ंक्शन का आह्वान करने के लिए स्क्रिप्ट के लोड-ईवेंट का भी उपयोग नहीं कर सकते हैं, क्योंकि जब यह आग लगती है, लोडर लोड होता है, मानचित्र-एपीआई नहीं।

क्या करें:
पटकथा यूआरएल के लिए एक कॉलबैक-पैरामीटर संलग्न

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

अब आप एक अलग लोडर मिल (मूल्य के रूप में इनिशियलाइज़-समारोह के नाम के साथ) जो :

1. document.write()
2. कॉल कॉलबैक-कामकाज का उपयोग नहीं करता पर (प्रारंभ) जब नक्शे-एपीआई लोड किया गया है

डेमो: http://jsfiddle.net/doktormolle/7cu2F/

---

टिप्पणी से संबंधित: लगता कॉलबैक एक समारोह सीधे खिड़की से जुड़ी हो गया है। ठंडा गूगल नहीं :)

एक और विकल्प है, the google-API-loader जो फ़ंक्शन-संदर्भों (फ़ंक्शन-नामों के बजाय) के उपयोग का समर्थन करता है।

नमूना है, जो अतुल्यकालिक रूप से नक्शे-एपीआई लोड करता है, लेकिन केवल जब वहाँ दस्तावेज़ में आईडी map-canvas साथ एक तत्व है, और फिर एक नक्शा बनाता है:

window.addEventListener('load',function(){ 
 
     if(document.getElementById('map-canvas')){ 
 
     google.load("maps", "3",{ 
 
      callback:function(){ 
 
      new google.maps.Map(document.getElementById('map-canvas'), { 
 
       center: new google.maps.LatLng(0,0), 
 
       zoom: 3 
 
       }); 
 
      } 
 
     });  
 
     } 
 
    },false);

 body,html,#map-canvas{ 
 
     height:100%; 
 
     margin:0; 
 
     padding:0; 
 
     width:100%; 
 
     }

<script src="https://www.google.com/jsapi?.js"></script> 
 
<div id="map-canvas"></div>