इस गाइड में, 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
ऑपरेटर का इस्तेमाल करके importLibrary()
को कॉल करें
async
फ़ंक्शन के अंदर से. ज़रूरी क्लास के लिए वैरिएबल तय करने पर
आप सही पाथ का इस्तेमाल करके छोड़ देते हैं (जैसे, 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();
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
एलिमेंट:
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
: क्षेत्र जोड़ें. यह दिए गए देश के आधार पर मैप का व्यवहार बदलता है या क्षेत्र.authReferrerPolicy
: मैप 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>
डायरेक्ट स्क्रिप्ट लोड होने के दौरान, यूआरएल पैरामीटर
इस सेक्शन में उन सभी पैरामीटर के बारे में बताया गया है जिन्हें क्वेरी में तय किया जा सकता है
स्ट्रिंग लोड होते समय स्क्रिप्ट लोड होने के यूआरएल की स्ट्रिंग.
कुछ पैरामीटर ज़रूरी होते हैं, जबकि कुछ ज़रूरी नहीं होते हैं. जैसा कि इसमें मानक है
यूआरएल, सभी पैरामीटर को एंपरसैंड (&
) वर्ण का इस्तेमाल करके अलग किया जाता है.
उदाहरण के तौर पर दिए गए इस यूआरएल में, सभी संभावित पैरामीटर के लिए प्लेसहोल्डर मौजूद हैं:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&loading=async
&callback=FUNCTION_NAME
&v=VERSION
&libraries="LIBRARIES"
&language="LANGUAGE"
®ion="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
: मैप 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
क्वेरी पैरामीटर.
NPM js-api-loader पैकेज का इस्तेमाल करना
@googlemaps/js-api-loader NPM पैकेज मैनेजर के ज़रिए लोड करने के लिए, पैकेज उपलब्ध है. इसे निम्न आदेश:
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&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();