मैप की नई स्टाइल, जल्द ही 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() को कॉल करें, जैसा कि इस कोड उदाहरण में दिखाया गया है:

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 एलिमेंट का इस्तेमाल करके मैप जोड़ा है, तो आपका 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" को सेट करने का विकल्प है. अगर इस पैरामीटर के बारे में बताया गया हो और 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 इस्तेमाल कर सकता है. यह बताने के लिए कि Maps JavaScript API को सिंक्रोनस रूप से लोड नहीं किया गया है और स्क्रिप्ट के load इवेंट से कोई JavaScript कोड ट्रिगर नहीं होता, यह बताने के लिए async पर सेट करें. बेहतर परफ़ॉर्मेंस के लिए, हमारा सुझाव है कि जब भी मुमकिन हो, इसे 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 को सेट करने का विकल्प है. यह 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"

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