डाइनैमिक लाइब्रेरी इंपोर्ट एपीआई

डाइनैमिक लाइब्रेरी इंपोर्ट एपीआई, Maps JavaScript एपीआई और इसके साथ काम करने वाली सभी लाइब्रेरी को लोड करने का एक नया तरीका है. रनटाइम के दौरान लाइब्रेरी को डाइनैमिक तरीके से लोड करने की सुविधा से, आपको क्रॉस-कॉम्पोनेंट डिपेंडेंसी के बारे में चिंता करने की ज़रूरत नहीं है. साथ ही, लाइब्रेरी की प्रॉमिस-आधारित लोडिंग की अनुमति भी मिल जाती है. यह आपको Maps JavaScript API का इस्तेमाल करते समय, लंबे नेमस्पेस के इस्तेमाल से बचने की सुविधा भी देता है. इसके अलावा, लंबे नेमस्पेस को पॉप्युलेट किया जाता है और इसका इस्तेमाल अब भी किया जा सकता है.

डाइनैमिक लाइब्रेरी इंपोर्ट का इस्तेमाल करना

डाइनैमिक लाइब्रेरी इंपोर्ट एपीआई का इस्तेमाल करने के लिए, अपने एचटीएमएल पेज पर इनलाइन बूटस्ट्रैप लोडर के लिए एक स्क्रिप्ट टैग जोड़ें और importLibrary() को कॉल करने के लिए रनटाइम कोड जोड़ें (ऐसा करने के लिए, आप सामान्य स्क्रिप्ट लोडर का भी इस्तेमाल कर सकते हैं. ऐसा होने पर, आपके ऐप्लिकेशन कोड में importLibrary का इस्तेमाल करने से पहले कॉलबैक का इंतज़ार करना होगा). अपने ऐप्लिकेशन की ज़रूरत के मुताबिक, नीचे दिया गया कोड और अपना बूटस्ट्रैप पैरामीटर जोड़ना:

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
  key: "YOUR_API_KEY_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

रनटाइम के दौरान लाइब्रेरी लोड करने के लिए, await ऑपरेटर का इस्तेमाल करके importLibrary() को किसी एसिंक्रोनस फ़ंक्शन से कॉल करें: जैसा कि यहां दिखाया गया है:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

ज़रूरी पैरामीटर

  • key: आपकी एपीआई कुंजी. Maps JavaScript एपीआई तब तक लोड नहीं होगा, जब तक मान्य एपीआई कुंजी तय नहीं की जाती.

  • v: "beta" की झलक देखने के लिए, आपको बीटा चैनल की जानकारी देनी होगी.

ज़रूरी नहीं पैरामीटर

  • libraries लोड करने के लिए, Maps JavaScript एपीआई की लाइब्रेरी की कॉमा लगाकर अलग की गई सूची. ठीक से सेट की गई लाइब्रेरी का कोई सेट तय करने का सुझाव आम तौर पर नहीं दिया जाता है. हालांकि, यह सुविधा उन डेवलपर के लिए उपलब्ध है जो अपनी वेबसाइट की कैश मेमोरी में सेव किए गए वेब पेज को बेहतर बनाना चाहते हैं. हालांकि, इस बात का ध्यान रखें कि अगर किसी लाइब्रेरी की ज़रूरत नहीं है, तो उसे लोड करने में ज़्यादा समय लग सकता है.

  • language: इस्तेमाल की जाने वाली भाषा. इससे कंट्रोल के नाम, कॉपीराइट की सूचनाओं, ड्राइविंग के दिशा-निर्देशों, और कंट्रोल लेबल के साथ-साथ सेवा के अनुरोधों पर मिलने वाले जवाबों पर भी असर पड़ता है. इस्तेमाल की जा सकने वाली भाषाओं की सूची देखें.

  • region: इस्तेमाल करने के लिए region कोड. यह दिए गए देश या क्षेत्र के आधार पर मैप के व्यवहार को बदलता है.

  • solutionChannel Google Maps Platform कई तरह के सैंपल कोड उपलब्ध कराता है, ताकि आप तेज़ी से काम कर सकें. Google के ज़्यादा कॉम्प्लेक्स कोड सैंपल को अपनाने और समाधान की क्वालिटी को ट्रैक करने के लिए, Google अपने सैंपल कोड में एपीआई कॉल में solution_channel क्वेरी पैरामीटर शामिल करता है.

  • authReferrerPolicy: Maps JS के ग्राहक, Cloud Console में एचटीटीपी रेफ़रल देने वाले प्रतिबंधों को कॉन्फ़िगर कर सकते हैं. इससे वे यह सीमित कर सकते हैं कि किन यूआरएल को किसी खास एपीआई कुंजी का इस्तेमाल करने की अनुमति दी जाए. डिफ़ॉल्ट रूप से, इन प्रतिबंधों को इस तरह कॉन्फ़िगर किया जा सकता है कि वे API कुंजी का इस्तेमाल करने के लिए सिर्फ़ कुछ पाथ दें. अगर एक ही डोमेन या शुरुआत की जगह पर मौजूद कोई यूआरएल एपीआई कुंजी का इस्तेमाल कर सकता है, तो आप मैप JavaScript एपीआई के अनुरोधों को अनुमति देते समय भेजे जाने वाले डेटा को सीमित करने के लिए authReferrerPolicy: "origin" को सेट कर सकते हैं. अगर इस पैरामीटर की जानकारी दी गई है और Cloud Console पर एचटीटीपी रेफ़रर पाबंदियां चालू की गई हैं, तो Maps JavaScript API सिर्फ़ तब लोड होगा, जब एचटीटीपी का रेफ़रल देने वाला कोई प्रतिबंध हो. साथ ही, यह मौजूदा वेबसाइट के डोमेन से बिना पाथ के मेल खाता हो.