पुस्तकालय

Maps JavaScript API के लिए JavaScript कोड लोड करने के लिए, अपने पेज पर बूटस्ट्रैप लोडर स्क्रिप्ट शामिल करें. इसका फ़ॉर्मैट यह होना चाहिए:

<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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Maps JavaScript API, लाइब्रेरी से मिलकर बना है. इन्हें तब तक लोड नहीं किया जाता, जब तक इनके लिए खास तौर पर अनुरोध न किया जाए. कॉम्पोनेंट को लाइब्रेरी में बांटने से, एपीआई तेज़ी से लोड और पार्स हो पाता है. इसलिए, आपको सिर्फ़ उन लाइब्रेरी को लोड और पार्स करने का अतिरिक्त खर्च उठाना पड़ता है जिनकी आपको ज़रूरत होती है. डाइनैमिक लाइब्रेरी इंपोर्ट का इस्तेमाल करने पर, इनलाइन बूटस्ट्रैप लोडर डिफ़ॉल्ट रूप से कोई लाइब्रेरी लोड नहीं करता. यहां तक कि core या maps भी लोड नहीं करता. google.maps.importLibrary() को कॉल करने से पहले, Maps JavaScript API का कोई भी हिस्सा लोड नहीं होता.

रनटाइम के दौरान किसी लाइब्रेरी को लोड करने के लिए, await ऑपरेटर का इस्तेमाल करके google.maps.importLibrary() को async फ़ंक्शन में कॉल करें. मान लें कि सिर्फ़ अनुरोध की गई लाइब्रेरी लोड की गई है. साथ ही, आपके कोड में इस्तेमाल की गई हर लाइब्रेरी के लिए, google.maps.importLibrary() को कॉल करें. उदाहरण के लिए:

const { Map } = await google.maps.importLibrary("maps");

यहां दिए गए कोड के उदाहरण में, maps और marker लाइब्रेरी, दोनों को लोड करने का तरीका दिखाया गया है, ताकि Map और AdvancedMarkerElement क्लास को ऐक्सेस किया जा सके:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

उपलब्ध लाइब्रेरी

डाइनैमिक लाइब्रेरी इंपोर्ट और सीधे स्क्रिप्ट लोड करने वाले टैग के साथ, इन लाइब्रेरी का इस्तेमाल किया जा सकता है:

यहां दिए गए बूटस्ट्रैप अनुरोध से पता चलता है कि सीधे स्क्रिप्ट लोड करने वाले टैग में, Maps JavaScript API की google.maps.geometry लाइब्रेरी के लिए अनुरोध कैसे जोड़ा जाता है:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

एक से ज़्यादा लाइब्रेरी का अनुरोध करने के लिए, उन्हें कॉमा से अलग करें:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>