वेब पेज पर Google Maps जोड़ना

एचटीएमएल, सीएसएस, और JavaScript कोड का इस्तेमाल करके, वेब पेज पर Google मैप जोड़ा जा सकता है. इस पेज पर दो तरीकों से किसी वेब पेज में मैप जोड़ने का तरीका बताया गया है: gmp-map कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके और div एलिमेंट का इस्तेमाल करके.

खास जानकारी

मैप लोड करने के लिए, आपके वेब पेज को ये काम करने होंगे:

  • बूटस्ट्रैप लोडर का इस्तेमाल करके Maps JavaScript API को लोड करें. यहां आपकी एपीआई कुंजी पास की जाती है और उसे एचटीएमएल या JavaScript सोर्स फ़ाइलों में जोड़ा जा सकता है.
  • एचटीएमएल पेज में मैप जोड़ें और ज़रूरी सीएसएस स्टाइल जोड़ें.
  • maps लाइब्रेरी लोड करें और मैप शुरू करें.

gmp-map एलिमेंट का इस्तेमाल करके मैप जोड़ें

gmp-map एलिमेंट, वेब कॉम्पोनेंट का इस्तेमाल करके बनाया गया कस्टम एचटीएमएल एलिमेंट है. gmp-map एलिमेंट का इस्तेमाल करके, वेब पेज पर मैप जोड़ने के लिए, यह तरीका अपनाएं.

  1. एचटीएमएल पेज पर, अपनी एपीआई कुंजी और दूसरे विकल्पों के साथ कॉन्फ़िगर किए गए बूटस्ट्रैप वाला script एलिमेंट जोड़ें. बूटस्ट्रैप के नीचे दिए गए उदाहरण में, callback पैरामीटर को हटा दिया गया है, क्योंकि इसकी ज़रूरत नहीं है.

    <script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=map,marker">

  2. एचटीएमएल पेज पर, gmp-map एलिमेंट जोड़ें. center के लिए अक्षांश और देशांतर निर्देशांक और zoom के लिए ज़ूम वैल्यू तय करें. इस उदाहरण में, height स्टाइल एट्रिब्यूट के बारे में भी बताया गया है.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

उदाहरण कोड को पूरा करें

<html>
  <head>
    <title>Add a Map using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

div एलिमेंट और JavaScript का इस्तेमाल करके मैप जोड़ें

मैप लोड करने के लिए, div एलिमेंट अब भी काम करता है. div एलिमेंट का इस्तेमाल करके, वेब पेज पर मैप जोड़ने के लिए, यह तरीका अपनाएं.

  1. एचटीएमएल पेज पर, बूटस्ट्रैप लोडर वाला script एलिमेंट जोड़ें. यह एलिमेंट आपकी एपीआई कुंजी और अन्य विकल्पों के साथ कॉन्फ़िगर किया जाता है. इसके अलावा, script टैग को घटाकर, बूटस्ट्रैप लोडर कोड को सीधे TypeScript या 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",
    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>

  2. एचटीएमएल पेज पर, मैप शामिल करने के लिए div एलिमेंट जोड़ें.

    <div id="map"></div>

  3. सीएसएस में, मैप की ऊंचाई को 100% पर सेट करें.

    #map {
  height: 100%;
}

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

उदाहरण कोड को पूरा करें

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

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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>
index.html

सैंपल आज़माएं