पेश है Places UI Kit: यह तुरंत इस्तेमाल किए जा सकने वाले किफ़ायती कॉम्पोनेंट की लाइब्रेरी है. इसकी मदद से, Google Maps पर उपलब्ध Places के जाने-पहचाने यूज़र इंटरफ़ेस को किसी भी मैप के साथ इस्तेमाल किया जा सकता है. इसे आज़माएं और GMP को बेहतर बनाने के लिए अपने सुझाव/राय दें या शिकायत करें!

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

v: Maps JavaScript API का वह वर्शन जिसे लोड करना है.
libraries: लोड करने के लिए, Maps JavaScript API की लाइब्रेरी का एक अतिरिक्त कलेक्शन. आम तौर पर, लाइब्रेरी का तय सेट तय करने का सुझाव नहीं दिया जाता. हालांकि, यह उन डेवलपर के लिए उपलब्ध है जो अपनी वेबसाइट पर कैश मेमोरी के इस्तेमाल को बेहतर बनाना चाहते हैं.
language: इस्तेमाल की जाने वाली भाषा. इससे कंट्रोल के नाम, कॉपीराइट की सूचनाएं, ड्राइविंग के दिशा-निर्देश, कंट्रोल के लेबल, और सेवा के अनुरोधों के जवाबों पर असर पड़ता है. इस्तेमाल की जा सकने वाली भाषाओं की सूची देखें.
region: इस्तेमाल करने के लिए क्षेत्र का कोड. इससे, किसी देश या इलाके के हिसाब से एपीआई के काम करने के तरीके में बदलाव होता है.
authReferrerPolicy: Maps JS के ग्राहक, Cloud Console में एचटीटीपी रेफ़रर से जुड़ी पाबंदियां कॉन्फ़िगर कर सकते हैं. इससे यह तय किया जा सकता है कि किन यूआरएल को किसी खास एपीआई कुंजी का इस्तेमाल करने की अनुमति है. डिफ़ॉल्ट रूप से, इन पाबंदियों को कॉन्फ़िगर किया जा सकता है, ताकि सिर्फ़ कुछ पाथ को एपीआई पासकोड का इस्तेमाल करने की अनुमति मिले. अगर एक ही डोमेन या ऑरिजिन पर मौजूद किसी यूआरएल को एपीआई कुंजी का इस्तेमाल करना है, तो authReferrerPolicy: "origin" को सेट करके, Maps JavaScript API से अनुरोधों को अनुमति देते समय भेजे गए डेटा की मात्रा को सीमित किया जा सकता है. जब इस पैरामीटर को सेट किया जाता है और 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 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 सिर्फ़ तब लोड हो पाएगा, जब एचटीटीपी रेफ़रर से जुड़ी कोई ऐसी पाबंदी हो जो मौजूदा वेबसाइट के डोमेन से मेल खाती हो और जिसमें कोई पाथ न दिया गया हो.
mapIds: कॉमा से अलग की गई मैप आईडी की सूची. इस विकल्प की मदद से, दिए गए मैप आईडी के कॉन्फ़िगरेशन को पहले से लोड किया जा सकता है. मैप आईडी का इस्तेमाल करने के लिए, यहां मैप आईडी तय करना ज़रूरी नहीं है. हालांकि, यह उन डेवलपर के लिए उपलब्ध है जो नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाना चाहते हैं.
channel: हर चैनल के हिसाब से इस्तेमाल को ट्रैक करना लेख पढ़ें.
solution_channel: Google Maps Platform, कई तरह के सैंपल कोड उपलब्ध कराता है, ताकि आपको जल्दी से शुरू करने में मदद मिल सके. हमारे ज़्यादा जटिल कोड सैंपल के इस्तेमाल को ट्रैक करने और समाधान की क्वालिटी को बेहतर बनाने के लिए, Google हमारे सैंपल कोड में एपीआई कॉल में solution_channel क्वेरी पैरामीटर शामिल करता है.

ध्यान दें: इस क्वेरी पैरामीटर का इस्तेमाल Google करता है. ज़्यादा जानकारी के लिए, Google Maps Platform के समाधानों के पैरामीटर देखें.

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

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

npm install @googlemaps/js-api-loader

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

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

लोडर, Promise और कॉलबैक इंटरफ़ेस दिखाता है. यहां डिफ़ॉल्ट प्रॉमिस तरीके 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,
  });
});index.ts

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

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