Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

Maps JavaScript API लोड करना

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

डाइनैमिक लाइब्रेरी इंपोर्ट का इस्तेमाल करना
सीधे तौर पर स्क्रिप्ट लोड करने वाले टैग का इस्तेमाल करना
NPM js-api-loader पैकेज का इस्तेमाल करना

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

डाइनैमिक लाइब्रेरी इंपोर्ट की मदद से, रनटाइम के दौरान लाइब्रेरी लोड की जा सकती हैं. इससे, लोड होने के दौरान एक साथ सभी लाइब्रेरी के लिए अनुरोध करने के बजाय, ज़रूरत पड़ने पर लाइब्रेरी के लिए अनुरोध किया जा सकता है. साथ ही, इससे आपका पेज, 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();index.js

जब आपके ऐप्लिकेशन को एक ही समय में कई लाइब्रेरी की ज़रूरत हो, तो उनके लिए एक साथ अनुरोध करने के लिए, Promise.all() का इस्तेमाल करें:

const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
  google.maps.importLibrary('places'),
  google.maps.importLibrary('marker'),
]);

एक के बाद एक अलग-अलग लाइनों में await google.maps.importLibrary() को कॉल न करें. क्रम से await स्टेटमेंट, तब तक काम नहीं करते, जब तक हर लाइब्रेरी डाउनलोड और शुरू नहीं हो जाती. इसके बाद ही, अगली लाइब्रेरी के लिए अनुरोध किया जाता है. इससे नेटवर्क वॉटरफ़ॉल बनता है और लोड होने में ज़्यादा समय लगता है. Promise.all() सभी लाइब्रेरी को एक साथ डाउनलोड करना शुरू करता है और जैसे ही वे सभी तैयार हो जाती हैं, यह काम पूरा हो जाता है.

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

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

async function initMap() {
  await Promise.all([
    google.maps.importLibrary("maps"),
    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 लोड नहीं होगा.

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

v: Maps JavaScript API का वह वर्शन जिसे लोड करना है. अगर आपने किसी चैनल या वर्शन के बारे में साफ़ तौर पर नहीं बताया है, तो आपको डिफ़ॉल्ट रूप से, हर हफ़्ते अपडेट होने वाला चैनल मिलेगा. अगर आपने प्रीमियम प्लान से माइग्रेट किया है और किसी चैनल या वर्शन के बारे में साफ़ तौर पर नहीं बताया है, तो आपको डिफ़ॉल्ट रूप से, हर तीन महीने में अपडेट होने वाला चैनल मिलेगा. अगर आपने कोई अमान्य वर्शन बताया है, तो आपको अपना डिफ़ॉल्ट चैनल मिलेगा. ज़्यादा जानें.
libraries: Maps JavaScript API की उन अतिरिक्त लाइब्रेरी का कलेक्शन जिन्हें पहले से लोड करना है. आम तौर पर, लाइब्रेरी का कोई तय सेट तय करने का सुझाव नहीं दिया जाता. हालांकि, यह उन डेवलपर के लिए उपलब्ध है जो अपनी वेबसाइट पर कैशिंग के व्यवहार को बेहतर बनाना चाहते हैं. इस्तेमाल करने से पहले, चुनी गई हर लाइब्रेरी के लिए google.maps.importLibrary() को कॉल करना अब भी ज़रूरी है.
language: इस्तेमाल की जाने वाली भाषा. इससे कंट्रोल के नाम, कॉपीराइट वाला कॉन्टेंट मिलने की सूचना, ड्राइविंग के लिए रास्ते के निर्देश, कंट्रोल के लेबल, और सेवा के अनुरोधों के जवाब पर असर पड़ता है. उपलब्ध भाषाओं की सूची देखें .
region: इस्तेमाल किया जाने वाला इलाके का कोड. इससे, किसी देश या इलाके के हिसाब से एपीआई के व्यवहार में बदलाव होता है.
authReferrerPolicy: Maps JS के ग्राहक, Cloud Console में एचटीटीपी रेफ़रर की पाबंदियां कॉन्फ़िगर कर सकते हैं. इससे यह तय किया जा सकता है कि किन यूआरएल को किसी खास एपीआई पासकोड का इस्तेमाल करने की अनुमति है. डिफ़ॉल्ट रूप से, इन पाबंदियों को इस तरह कॉन्फ़िगर किया जा सकता है कि सिर्फ़ कुछ पाथ को एपीआई पासकोड का इस्तेमाल करने की अनुमति मिले. अगर एक ही डोमेन या ऑरिजिन पर मौजूद किसी भी यूआरएल को एपीआई पासकोड का इस्तेमाल करने की अनुमति है, तो authReferrerPolicy: "origin" सेट किया जा सकता है. इससे, Maps JavaScript API से अनुरोधों को अनुमति देते समय भेजे जाने वाले डेटा की मात्रा को सीमित किया जा सकता है. जब यह पैरामीटर तय किया जाता है और Cloud Console पर एचटीटीपी रेफ़रर की पाबंदियां चालू होती हैं, तो Maps JavaScript API सिर्फ़ तब लोड हो पाएगा, जब एचटीटीपी रेफ़रर की कोई ऐसी पाबंदी हो जो पाथ तय किए बिना, मौजूदा वेबसाइट के डोमेन से मेल खाती हो.
mapIds: मैप आईडी का कलेक्शन. इससे, तय किए गए मैप आईडी के लिए कॉन्फ़िगरेशन पहले से लोड हो जाता है. मैप आईडी के इस्तेमाल के लिए, यहां मैप आईडी तय करना ज़रूरी नहीं है. हालांकि, यह उन डेवलपर के लिए उपलब्ध है जो नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाना चाहते हैं.
channel: हर चैनल के हिसाब से इस्तेमाल की जानकारी देखें.

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

इस सेक्शन में, सीधे तौर पर स्क्रिप्ट लोड करने वाले टैग का इस्तेमाल करने का तरीका बताया गया है. सीधे तौर पर स्क्रिप्ट लोड करने से, मैप लोड होने पर लाइब्रेरी लोड हो जाती हैं. इससे, रनटाइम के दौरान लाइब्रेरी के लिए साफ़ तौर पर अनुरोध करने की ज़रूरत नहीं पड़ती. इसलिए, 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 API लोड नहीं होगा.

ज़रूरी नहीं पैरामीटर (सीधे तौर पर स्क्रिप्ट लोड करने के लिए)

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 पैकेज का इस्तेमाल करना

अहम जानकारी: वर्शन v2.0.0 एक बड़ा बदलाव है. इसमें पुराने Loader क्लास की जगह, दो फ़ंक्शन वाले एपीआई का इस्तेमाल किया गया है. ये फ़ंक्शन setOptions() और importLibrary() हैं. इस बदलाव से, Maps API की अलग-अलग लाइब्रेरी को मांग पर डाइनैमिक तरीके से लोड किया जा सकता है. साथ ही, शुरुआती पेज की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सुविधाओं के डाउनलोड को टाला जा सकता है.

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

npm install @googlemaps/js-api-loader

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

TypeScript

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

JavaScript

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

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

TypeScript

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

const API_KEY = 'GOOGLE_MAPS_API_KEY';

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();index.ts

JavaScript

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

const API_KEY = 'GOOGLE_MAPS_API_KEY';

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();index.js

पूरी तरह से तैयार उदाहरण कोड देखें.

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

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

माइग्रेशन के चरण

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

पहले

<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();

एक से ज़्यादा लाइब्रेरी लोड करना

एक से ज़्यादा लाइब्रेरी लोड करने के लिए, लाइब्रेरी के लिए एक साथ अनुरोध करने और लौटाए गए क्लास को डीस्ट्रक्चर करने के लिए, Promise.all() का इस्तेमाल करें:

const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
  google.maps.importLibrary('places'),
  google.maps.importLibrary('marker'),
]);

अलग-अलग await स्टेटमेंट को चेन करके, लाइब्रेरी को क्रम से लोड न करें:

// Avoid loading libraries serially:
const { Place } = await google.maps.importLibrary('places');
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

जब importLibrary() कॉल को एक के बाद एक await किया जाता है, तो दूसरी लाइब्रेरी के लिए अनुरोध तब तक शुरू नहीं होता, जब तक पहली लाइब्रेरी पूरी तरह से डाउनलोड और शुरू नहीं हो जाती. Promise.all() का इस्तेमाल करने से, लाइब्रेरी के सभी अनुरोध एक ही समय पर शुरू हो जाते हैं. इससे नेटवर्क की लेटेन्सी कम होती है और शुरू होने की स्पीड बेहतर होती है.