मैप JavaScript एपीआई का JavaScript कोड लोड करने के लिए, आप अपने पेज पर नीचे दिए गए फ़ॉर्म में एक बूटस्ट्रैप लोडर स्क्रिप्ट शामिल करें:
<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_HERE", 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>
Maps JavaScript एपीआई लाइब्रेरी से बना होता है. यह तब तक लोड नहीं होता, जब तक इसके लिए खास तौर पर अनुरोध नहीं किया जाता. एपीआई को लाइब्रेरी में बांटने के बाद, एपीआई तेज़ी से लोड और पार्स हो पाता है. लोड करने और पार्स करने के लिए, आपको ज़रूरत के मुताबिक ही अतिरिक्त ओवरहेड मिलेगा.
रनटाइम के दौरान, await
अतिरिक्त ऑपरेटर को लोड करने के लिए, async
फ़ंक्शन में से importLibrary()
को कॉल करें. उदाहरण के लिए:
const { Map } = await google.maps.importLibrary("maps");
यहां दिए गए कोड के उदाहरण में, Map
और AdvancedMarkerElement
, दोनों लाइब्रेरी को लोड करने के बारे में बताया गया है:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
डाइनैमिक लाइब्रेरी इंपोर्ट के लिए लाइब्रेरी
डाइनैमिक लाइब्रेरी इंपोर्ट के साथ इस्तेमाल करने के लिए, ये लाइब्रेरी उपलब्ध हैं:
core
(google.maps.CoreLibrary
)maps
(google.maps.MapsLibrary
)places
(google.maps.PlacesLibrary
)geocoding
(google.maps.GeocodingLibrary
)routes
(google.maps.RoutesLibrary
)marker
(google.maps.MarkerLibrary
)geometry
(google.maps.GeometryLibrary
)elevation
(google.maps.ElevationLibrary
)streetView
(google.maps.StreetViewLibrary
)journeySharing
(google.maps.JourneySharingLibrary
)drawing
(google.maps.DrawingLibrary
)visualization
(google.maps.VisualizationLibrary
)
बूटस्ट्रैप URL (लेगसी) के लिए लाइब्रेरी
नीचे दी गई लाइब्रेरी लेगसी बूटस्ट्रैप स्क्रिप्ट टैग के साथ इस्तेमाल की जा सकती हैं:drawing
उपयोगकर्ताओं को मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर बनाने के लिए, ग्राफ़िकल इंटरफ़ेस देता है. ज़्यादा जानकारी के लिए, ड्रॉइंग लाइब्रेरी के दस्तावेज़ देखें.geometry
में पृथ्वी की सतह पर स्केलर ज्यामितीय मानों (जैसे कि दूरी और क्षेत्र) की गणना करने के लिए उपयोगिता फ़ंक्शन शामिल हैं. ज़्यादा जानकारी के लिए, ज्यामिति लाइब्रेरी के दस्तावेज़ देखें.journeySharing
, Google Maps Platform परिवहन और लॉजिस्टिक समाधान के लिए सहायता देता है.localContext
, उपयोगकर्ताओं को आपकी बताई गई जगह के आस-पास दिलचस्पी की मुख्य जगहें दिखाता है. ज़्यादा जानकारी के लिए, लोकल कॉन्टेक्स्ट लाइब्रेरी का दस्तावेज़ देखें.marker
की मदद से, अपने मैप में पसंद के मुताबिक, बेहतर परफ़ॉर्मेंस देने वाले बेहतर मार्कर जोड़े जा सकते हैं. ज़्यादा जानकारी के लिए, बेहतर मार्कर वाले दस्तावेज़ देखें.places
आपके ऐप्लिकेशन को किसी तय इलाके में मौजूद जगहों, भौगोलिक जगहों या लोकप्रिय जगहों को खोजने में मदद करता है. ज़्यादा जानकारी के लिए, जगहों की लाइब्रेरी के दस्तावेज़ देखें.visualization
में डेटा को विज़ुअल तरीके से दिखाने के लिए हीटमैप दिया जाता है. ज़्यादा जानकारी के लिए, विज़ुअलाइज़ेशन लाइब्रेरी का दस्तावेज़ देखें.
यहां दिए गए बूटस्ट्रैप अनुरोध में, 'Maps JavaScript एपीआई' के
google.maps.geometry
लाइब्रेरी के लिए, लेगसी बूटस्ट्रैप लोडर स्क्रिप्ट में अनुरोध जोड़ने का तरीका बताया गया है:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap">
</script>
कई लाइब्रेरी का अनुरोध करने के लिए, उन्हें कॉमा से अलग करें:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places&callback=initMap">
</script>