Maps JavaScript API लोड करना

इस गाइड में, Maps JavaScript API को लोड करने का तरीका बताया गया है. इसे लोड करने के तीन तरीके हैं:

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

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

Maps JavaScript API को लोड करने के लिए, अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़ें. इसका तरीका, यहां दिए गए स्निपेट में दिखाया गया है:

<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>

बूटस्ट्रैप लोडर कोड को सीधे अपने JavaScript कोड में भी जोड़ा जा सकता है.

रनटाइम पर लाइब्रेरी लोड करने के लिए, async फ़ंक्शन में importLibrary() को कॉल करने के लिए, await ऑपरेटर का इस्तेमाल करें. ज़रूरी क्लास के लिए वैरिएबल डिक्लेयर करने से, क्वालिफ़ाइड पाथ (जैसे, google.maps.Map) का इस्तेमाल करने की ज़रूरत नहीं पड़ती. इसका तरीका, यहां दिए गए कोड के उदाहरण में दिखाया गया है:

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();

आपका फ़ंक्शन, ज़रूरी क्लास के लिए वैरिएबल डिक्लेयर किए बिना भी लाइब्रेरी लोड कर सकता है. यह तब खास तौर पर काम का होता है, जब आपने gmp-map एलिमेंट का इस्तेमाल करके कोई मैप जोड़ा हो. वैरिएबल के बिना, आपको क्वालिफ़ाइड पाथ का इस्तेमाल करना होगा. जैसे, google.maps.Map:

let map;
let center =  { lat: -34.397, lng: 150.644 };

async function initMap() {
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 8,
    mapId: "DEMO_MAP_ID",
  });

  addMarker();
}

async function addMarker() {
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: center,
  });
}

initMap();

इसके अलावा, लाइब्रेरी को सीधे एचटीएमएल में लोड किया जा सकता है. इसका तरीका यहां दिखाया गया है:

<script>
google.maps.importLibrary("maps");
google.maps.importLibrary("marker");
</script>

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

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

  • key: आपका एपीआई पासकोड. अगर कोई मान्य एपीआई पासकोड नहीं दिया जाता है, तो Maps JavaScript API लोड नहीं होगा.

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

स्क्रिप्ट को सीधे लोड करने वाले टैग का इस्तेमाल करना

इस सेक्शन में, स्क्रिप्ट को सीधे लोड करने वाले टैग का इस्तेमाल करने का तरीका बताया गया है. स्क्रिप्ट को सीधे लोड करने वाले टैग की मदद से, मैप लोड होने पर लाइब्रेरी लोड की जा सकती हैं. इससे, रनटाइम पर लाइब्रेरी का अनुरोध करने की ज़रूरत नहीं पड़ती. इसलिए, gmp-map एलिमेंट का इस्तेमाल करके बनाए गए मैप को आसान बनाया जा सकता है. स्क्रिप्ट को सीधे लोड करने वाले टैग की मदद से, स्क्रिप्ट लोड होने पर अनुरोध की गई सभी लाइब्रेरी एक साथ लोड हो जाती हैं. इसलिए, कुछ ऐप्लिकेशन की परफ़ॉर्मेंस पर असर पड़ सकता है. पेज लोड होने पर, स्क्रिप्ट को सीधे लोड करने वाले टैग को सिर्फ़ एक बार शामिल करें.

स्क्रिप्ट टैग जोड़ना

किसी एचटीएमएल फ़ाइल में, Maps JavaScript API को इनलाइन लोड करने के लिए, यहां दिखाए गए तरीके से script टैग जोड़ें.

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

स्क्रिप्ट को सीधे लोड करने वाले यूआरएल पैरामीटर

इस सेक्शन में, Maps JavaScript API को लोड करते समय, स्क्रिप्ट को लोड करने वाले यूआरएल की क्वेरी स्ट्रिंग में तय किए जा सकने वाले सभी पैरामीटर के बारे में बताया गया है. कुछ पैरामीटर ज़रूरी होते हैं, जबकि कुछ ज़रूरी नहीं होते. यूआरएल में स्टैंडर्ड के तौर पर, सभी पैरामीटर को एंपरसैंड (&) वर्ण का इस्तेमाल करके अलग किया जाता है.

यहां दिए गए यूआरएल के उदाहरण में, सभी संभावित पैरामीटर के लिए प्लेसहोल्डर मौजूद हैं:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&loading=async
&callback=FUNCTION_NAME
&v=VERSION
&libraries="LIBRARIES"
&language="LANGUAGE"
&region="REGION"
&auth_referrer_policy="AUTH_REFERRER_POLICY"
&map_ids="MAP_IDS"
&channel="CHANNEL"
&solution_channel="SOLUTION_IDENTIFIER"

यहां दिए गए script टैग में मौजूद यूआरएल, Maps JavaScript API को लोड करता है:

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

ज़रूरी पैरामीटर (सीधे तौर पर) {:.hide-from-toc}

Maps JavaScript API को लोड करने के लिए, ये पैरामीटर ज़रूरी हैं.

  • key: आपका एपीआई पासकोड. अगर कोई मान्य एपीआई पासकोड नहीं दिया जाता है, तो Maps JavaScript API लोड नहीं होगा.

ज़रूरी नहीं पैरामीटर (सीधे तौर पर) {:.hide-from-toc}

Maps JavaScript API के किसी खास वर्शन का अनुरोध करने, अतिरिक्त लाइब्रेरी लोड करने, अपने मैप को स्थानीय भाषा में दिखाने या एचटीटीपी रेफ़रर की जांच करने की नीति तय करने के लिए, इन पैरामीटर का इस्तेमाल करें

  • loading: कोड लोड करने की वह रणनीति जिसका इस्तेमाल Maps JavaScript API कर सकता है. async पर सेट करके यह बताया जाता है कि Maps JavaScript API को सिंक्रोनस तरीके से लोड नहीं किया गया है और स्क्रिप्ट के load इवेंट से कोई JavaScript कोड ट्रिगर नहीं होता है. बेहतर परफ़ॉर्मेंस के लिए, हमारा सुझाव है कि इसे async पर सेट करें. (Maps JavaScript API के उपलब्ध होने पर कार्रवाई करने के लिए, callback पैरामीटर का इस्तेमाल करें.) यह वर्शन 3.55 से उपलब्ध है.

  • callback: Maps JavaScript API के पूरी तरह लोड होने के बाद, कॉल किए जाने वाले ग्लोबल फ़ंक्शन का नाम.

  • v: Maps JavaScript API का वह वर्शन जिसे इस्तेमाल करना है.

  • libraries: Maps JavaScript API की उन अतिरिक्त लाइब्रेरी की कॉमा से अलग की गई सूची जिन्हें लोड करना है.

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

  • region: इस्तेमाल किया जाने वाला इलाके का कोड. इससे, किसी देश या इलाके के हिसाब से एपीआई के काम करने के तरीके में बदलाव होता है.

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

  • map_ids: मैप आईडी की कॉमा से अलग की गई सूची. इससे, तय किए गए मैप आईडी के लिए कॉन्फ़िगरेशन पहले से लोड हो जाता है. मैप आईडी के इस्तेमाल के लिए, यहां मैप आईडी तय करना ज़रूरी नहीं है. हालांकि, यह उन डेवलपर के लिए उपलब्ध है जो नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाना चाहते हैं.

  • channel: हर चैनल के हिसाब से इस्तेमाल की जानकारी ट्रैक करने के बारे में पढ़ें.

NPM js-api-loader पैकेज का इस्तेमाल करना

NPM पैकेज मैनेजर का इस्तेमाल करके लोड करने के लिए, @googlemaps/js-api-loader पैकेज उपलब्ध है. इसे इंस्टॉल करने के लिए, यह कमांड दें:

npm install @googlemaps/js-api-loader

यहां दिखाए गए तरीके से पैकेज इंपोर्ट करें:

TypeScript

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

JavaScript

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

लाइब्रेरी उपलब्ध कराने के लिए, लोडर प्रॉमिस का इस्तेमाल करता है. importLibrary() तरीके का इस्तेमाल करके, लाइब्रेरी लोड करें. यहां दिए गए उदाहरण में, मैप लोड करने के लिए लोडर का इस्तेमाल करने का तरीका दिखाया गया है:

TypeScript

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8';

async function init(): Promise<void> {
    // Set loader options.
    setOptions({
        key: API_KEY,
    });

    // Load the Maps library.
    const { Map } = await importLibrary('maps');

    // Set map options.
    const mapOptions = {
        center: { lat: 48.8566, lng: 2.3522 },
        zoom: 3,
    };

    // Declare the map.
    new Map(document.getElementById('map')!, mapOptions);
}

void init();

JavaScript

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8';

async function init() {
    // Set loader options.
    setOptions({
        key: API_KEY,
    });

    // Load the Maps library.
    const { Map } = await importLibrary('maps');

    // Set map options.
    const mapOptions = {
        center: { lat: 48.8566, lng: 2.3522 },
        zoom: 3,
    };

    // Declare the map.
    new Map(document.getElementById('map'), mapOptions);
}

void init();

कोड के पूरे उदाहरण देखें.

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

इस सेक्शन में, डाइनैमिक लाइब्रेरी इंपोर्ट एपीआई का इस्तेमाल करने के लिए, अपने इंटिग्रेशन को माइग्रेट करने के लिए ज़रूरी चरणों के बारे में बताया गया है.

माइग्रेट करने का तरीका

सबसे पहले, स्क्रिप्ट को सीधे लोड करने वाले टैग को, इनलाइन बूटस्ट्रैप लोडर टैग से बदलें.

पहले

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

बाद में

<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>

इसके बाद, अपने ऐप्लिकेशन कोड को अपडेट करें:

  • अपने initMap() फ़ंक्शन को एसिंक्रोनस में बदलें.
  • ज़रूरी लाइब्रेरी को लोड करने और उन्हें ऐक्सेस करने के लिए, importLibrary() को कॉल करें.

पहले

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

बाद में

let map;
// initMap is now async
async function initMap() {
    // Request libraries when needed, not in the script tag.
    const { Map } = await google.maps.importLibrary("maps");
    // Short namespaces can be used.
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}

initMap();