सूचना: Google Maps Platform में, बेसमैप की नई स्टाइल जल्द ही उपलब्ध होगी. मैप की स्टाइल में किए गए इस अपडेट में, नया डिफ़ॉल्ट कलर पैलेट, आधुनिक पिन, और मैप के अनुभव और इस्तेमाल में सुधार शामिल हैं. सभी मैप स्टाइल, मार्च 2025 में अपने-आप अपडेट हो जाएंगे. उपलब्धता और अभी ऑप्ट इन करने के तरीके के बारे में ज़्यादा जानकारी के लिए, Google Maps Platform के लिए मैप की नई स्टाइल देखें.

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

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

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

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

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

initMap();

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

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

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

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

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

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

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

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

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