एचटीएमएल

Question

पर स्क्रिप्ट टैग जोड़ने के बिना google-maps-api-v3 का उपयोग कैसे करें I bower, gulp और browserify का उपयोग करके, मेरे सामने वाले विकास को स्वचालित कर दिया है। मैं Google नक्शे पर एपीआई कॉल को संभालने के लिए Gmaps नामक एक lib का उपयोग कर रहा हूं। समस्या यह है कि आयात gmaps से पहले मुझे अपने एचटीएमएल पर एक स्क्रिप्ट टैग जोड़ना होगा।

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

मैं स्क्रिप्ट लिंक और मेरे अन्य js फ़ाइलों के लिए concat से js कोड डाउनलोड करने के लिए करने की कोशिश की, भाग्य के बिना, एक all.min.js बना सकते हैं और करने की जरूरत से बचने के लिए उम्मीद कर रहा मेरी साइट पर एक से अधिक स्क्रिप्ट टैग हैं।

मैं केवल इस काम को HTML पर स्क्रिप्ट टैग जोड़ने का प्रबंधन कर सकता हूं। क्या संगत फाइलों के अंदर Google मानचित्र एपीआई का उपयोग करने के लिए वैसे भी है?

Answer 1

हालांकि मुझे Google मानचित्र प्रलेखन में कोई विशिष्ट उल्लेख नहीं मिल रहा है, मुझे विश्वास नहीं है कि यह एक अच्छा विचार होगा।

जावास्क्रिप्ट फ़ाइल का अनुरोध एक साधारण, स्थैतिक lib नहीं है। यदि आप https://maps.google.com/maps/api/js पर जाते हैं, तो आप देखते हैं कि Google के आंतरिक API संस्करण का उपयोग करने के लिए जानकारी शामिल है, इसलिए यदि आपने इसे अपनी साइट जेएस में जोड़ दिया है तो आप पाएंगे कि अगर Google अपने आंतरिक एपीआई और/या संस्करण संख्या को बदलता है तो यह काम करना बंद कर देगा।

सेंसर = सत्य param भी महत्वपूर्ण है यदि आप ब्राउजर में उपयोगकर्ता की भौगोलिक जानकारी जानकारी मांग रहे हैं, तो यदि आप स्क्रिप्ट को स्वीकार करते हैं तो खो जाएगा।

Answer 2

आप दस्तावेज़ में अतिरिक्त <script> -elements बिना नक्शे-एपीआई का उपयोग करना चाहें, तो इस सवाल का जवाब स्पष्ट रूप से है: नहीं नक्शे-एपीआई केवल 1 स्क्रिप्ट दस्तावेज़ में उपयोग नहीं किया, इसे और अधिक स्क्रिप्ट इंजेक्षन जाएगा ।

लेकिन जब प्रश्न स्क्रिप्ट की संख्या से संबंधित है जिसमें आपको "मैन्युअल रूप से" शामिल करना होगा, तो उत्तर हाँ है।

यह एक कॉलबैक साथ अतुल्यकालिक रूप से नक्शे-एपीआई लोड करने के लिए संभव है, कार्यप्रवाह होगा:

1. load the maps-API asynchronously
2. (समारोह आपने चरण 1 # में कॉलबैक के रूप में परिभाषित किया है) एक समारोह बनाने
3. कॉलबैक के अंदर:
   1. GMaps प्रारंभ
   2. रन निर्देश है कि GMaps
   के माध्यम से नक्शा बना

---

window.addEventListener('load',function(){ 

    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3&callback=initGmaps'; 
    document.body.appendChild(script); 
}); 


function initGmaps(){ 
    //paste here the contents of gmaps.js 
    //........ 

    //then use GMaps 
    new GMaps({ 
     div: '#map', 
     lat: 0, 
     lng: 0, 
     zoom:1 
     }); 
} 

डेमो: http://jsfiddle.net/doktormolle/cr1w32qn/