एचटीएमएल, सीएसएस, और JavaScript कोड का इस्तेमाल करके, वेब पेज पर Google मैप जोड़ा जा सकता है.
यह पृष्ठ किसी वेब पेज पर कोई मैप जोड़ने के दो तरीके दिखाता है:
gmp-map
कस्टम एचटीएमएल एलिमेंट और div
एलिमेंट का इस्तेमाल करके.
खास जानकारी
कोई मैप लोड करने के लिए, आपके वेब पेज को ये काम करने होंगे:
- बूटस्ट्रैप लोडर का इस्तेमाल करके Maps JavaScript API को लोड करें. यह है जहां आपके एपीआई पासकोड को पास किया जाता है. साथ ही, उसे एचटीएमएल या JavaScript में जोड़ा जा सकता है सोर्स फ़ाइलें शामिल हैं.
- एचटीएमएल पेज में मैप जोड़ें और ज़रूरी सीएसएस स्टाइल जोड़ें.
maps
लाइब्रेरी लोड करें और मैप शुरू करें.
gmp-map
एलिमेंट का इस्तेमाल करके मैप जोड़ें
gmp-map
एलिमेंट एक कस्टम एचटीएमएल एलिमेंट है, जिसे वेब कॉम्पोनेंट का इस्तेमाल करके बनाया गया है.
gmp-map
एलिमेंट का इस्तेमाल करके, वेब पेज पर मैप जोड़ने के लिए, यह तरीका अपनाएं.
एचटीएमएल पेज पर, ऐसा
script
एलिमेंट जोड़ें जिसमें कॉन्फ़िगर किया गया बूटस्ट्रैप शामिल हो और किसी भी अन्य विकल्प के साथ कनेक्ट करें. बूटस्ट्रैप के नीचे दिए गए उदाहरण में,callback
पैरामीटर को हटा दिया गया है, क्योंकि इसकी ज़रूरत नहीं है.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer> </script>
एचटीएमएल पेज पर,
gmp-map
एलिमेंट जोड़ें. अक्षांश और देशांतर की जानकारी देंcenter
के लिए निर्देशांक औरzoom
के लिए ज़ूम वैल्यू. इस उदाहरण मेंheight
शैली एट्रिब्यूट भी दिया गया है.<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map>
उदाहरण के तौर पर दिए गए कोड को पूरा करें
<html> <head> <title>Add a Map using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps&v=beta" defer ></script> </body> </html>
div
एलिमेंट और JavaScript का इस्तेमाल करके मैप जोड़ें
div
एलिमेंट का इस्तेमाल करके, वेब पेज पर मैप जोड़ने के लिए, यह तरीका अपनाएं.
एचटीएमएल पेज पर, बूटस्ट्रैप लोडर वाला
script
एलिमेंट जोड़ें कॉन्फ़िगर किया जा सकता है. वैकल्पिक रूप से, बूटस्ट्रैप लोडर कोड को सीधे TypeScript या JavaScript फ़ाइल में जोड़ दें, जिसमें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>
एचटीएमएल पेज पर, मैप को शामिल करने के लिए
div
एलिमेंट जोड़ें.<div id="map"></div>
सीएसएस में, मैप की ऊंचाई 100% पर सेट करें.
#map { height: 100%; }
JavaScript फ़ाइल में,
maps
लाइब्रेरी लोड करने के लिए एक फ़ंक्शन बनाएं और मैप शुरू करते हैं.center
के लिए अक्षांश और देशांतर निर्देशांक बताएं, औरzoom
का इस्तेमाल करने के लिए, ज़ूम करने का लेवल.
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();
उदाहरण के तौर पर दिए गए कोड को पूरा करें
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();अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
एचटीएमएल
<html> <head> <title>Simple Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>