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 कोड में भी जोड़ा जा सकता है.

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

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

JavaScript

let map;

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

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

initMap();

अगर आपने gmp-map एलिमेंट का इस्तेमाल करके मैप जोड़ा है, तो आपका initMap() फ़ंक्शन, ज़रूरी क्लास के लिए वैरिएबल तय किए बिना लाइब्रेरी लोड कर सकता है:

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

initMap();

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

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

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

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

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

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

  • v: लोड होने वाले Maps JavaScript API का वर्शन.

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

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

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

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

  • mapIds: मैप आईडी की कलेक्शन. इससे, बताए गए मैप आईडी के कॉन्फ़िगरेशन पहले से लोड हो जाते हैं.

  • channel: हर चैनल के इस्तेमाल को ट्रैक करने की सुविधा देखें.

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

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

इस सेक्शन में, डायरेक्ट स्क्रिप्ट लोड होने वाले टैग को इस्तेमाल करने का तरीका बताया गया है. डायरेक्ट स्क्रिप्ट, मैप लोड होने पर लाइब्रेरी को लोड करती है. इसलिए, यह 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>

ज़रूरी पैरामीटर (डायरेक्ट)

Maps JavaScript API लोड करते समय, इन पैरामीटर की ज़रूरत होती है.

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

वैकल्पिक पैरामीटर (डायरेक्ट)

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: इस्तेमाल करने के लिए region का कोड. इससे, दिए गए देश या इलाके के हिसाब से, मैप का व्यवहार बदल जाता है.

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

  • mapIds: मैप आईडी की कॉमा-सेपरेटेड लिस्ट. इससे, बताए गए मैप आईडी के कॉन्फ़िगरेशन पहले से लोड हो जाते हैं.

  • channel: हर चैनल के इस्तेमाल को ट्रैक करने की सुविधा देखें.

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

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

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

npm install @googlemaps/js-api-loader

इस पैकेज को ऐप्लिकेशन में, इनमें से इंपोर्ट किया जा सकता है:

import { Loader } from "@googlemaps/js-api-loader"

लोडर, प्रॉमिस और कॉलबैक इंटरफ़ेस दिखाता है. नीचे दिया गया है, प्रॉमिस के डिफ़ॉल्ट तरीके load() के इस्तेमाल के बारे में बताया गया है.

TypeScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

JavaScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

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

js-api-loader की सुविधा वाला सैंपल देखें.

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader
  .importLibrary('maps')
  .then(({Map}) => {
    new Map(document.getElementById("map"), mapOptions);
  })
  .catch((e) => {
    // do something
});

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

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

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

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

पहले

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&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();