Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

gmp-map एलिमेंट का इस्तेमाल करके मैप जोड़ना
div एलिमेंट और JavaScript का इस्तेमाल करके मैप जोड़ना
मैप इंस्टेंस पर प्रॉपर्टी सेट करना और पाना

खास जानकारी

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

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

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

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

एचटीएमएल पेज में, बूटस्ट्रैप वाला script एलिमेंट जोड़ें. इसके अलावा, इसे JavaScript या TypeScript की सोर्स फ़ाइल में भी जोड़ा जा सकता है. हालांकि, ऐसा script एलिमेंट के बिना किया जाता है. अपनी एपीआई कुंजी और अन्य विकल्पों के साथ बूटस्ट्रैप को कॉन्फ़िगर करें. आपके पास डाइनैमिक लाइब्रेरी इंपोर्ट या डायरेक्ट स्क्रिप्ट लोडिंग में से किसी एक को चुनने का विकल्प होता है. इस उदाहरण में, एचटीएमएल पेज में डायरेक्ट स्क्रिप्ट लोडिंग बूटस्ट्रैप जोड़ने का तरीका दिखाया गया है:
```
<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>
```
Google Maps JavaScript API लोड करने के बारे में ज़्यादा जानें
एचटीएमएल पेज पर, gmp-map एलिमेंट जोड़ें. center के लिए अक्षांश और देशांतर (ज़रूरी है), zoom के लिए ज़ूम वैल्यू (ज़रूरी है), और ज़रूरत पड़ने पर map-id तय करें. कुछ सुविधाओं के लिए यह ज़रूरी है, जैसे कि ऐडवांस मार्कर. मैप को दिखाने के लिए, CSS height एट्रिब्यूट ज़रूरी है. इसे एचटीएमएल या सीएसएस, दोनों में से किसी एक में तय किया जा सकता है. इस उदाहरण में, 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>

    <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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

`div` एलिमेंट (लेगसी) और JavaScript का इस्तेमाल करके मैप जोड़ना

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

एचटीएमएल पेज में, बूटस्ट्रैप वाला script एलिमेंट जोड़ें. इसके अलावा, इसे JavaScript या TypeScript की सोर्स फ़ाइल में भी जोड़ा जा सकता है. हालांकि, ऐसा 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>
```
Google Maps JavaScript API लोड करने के बारे में ज़्यादा जानें
एचटीएमएल पेज पर, मैप को शामिल करने के लिए div एलिमेंट जोड़ें.
```
<div id="map"></div>
```
सीएसएस में, मैप की ऊंचाई को 100% पर सेट करें. मैप को दिखाने के लिए, CSS height एट्रिब्यूट ज़रूरी है.
```
#map {
  height: 100%;
}
```
JavaScript फ़ाइल में, maps लाइब्रेरी लोड करने और मैप को शुरू करने के लिए एक फ़ंक्शन बनाएं. center के लिए अक्षांश और देशांतर निर्देशांक तय करें. साथ ही, zoom के लिए ज़ूम लेवल तय करें. अगर ज़रूरत हो, तो map-id प्रॉपर्टी का इस्तेमाल करके मैप आईडी जोड़ें.
```
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>

    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>index.html

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

JSFiddle.net

मैप इंस्टेंस पर प्रॉपर्टी सेट करना और पाना

मैप इंस्टेंस के साथ इंटरैक्ट करने के लिए, उसे शामिल करने वाला एलिमेंट चुनें. इसके लिए इस्तेमाल किया जाने वाला कोड अलग-अलग होगा. यह इस बात पर निर्भर करता है कि आपने gmp-map एलिमेंट या div एलिमेंट का इस्तेमाल किया है या नहीं.

`gmp-map` एलिमेंट से मैप इंस्टेंस पाना

gmp-map एलिमेंट का इस्तेमाल करते समय मैप इंस्टेंस पाने के लिए, mapElement इंस्टेंस को वापस पाने के लिए document.querySelector का इस्तेमाल करें. यहां दिखाया गया है.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

इसके बाद, mapElement इंस्टेंस पर प्रॉपर्टी सेट करें:

mapElement.zoom = 8;

MapElement क्लास, Map क्लास का इस्तेमाल करता है. यहां दिखाए गए तरीके से, MapElement.innerMap प्रॉपर्टी का इस्तेमाल करके Map क्लास को ऐक्सेस करें:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

`div` एलिमेंट से मैप इंस्टेंस पाना

div एलिमेंट का इस्तेमाल करते समय, मैप इंस्टेंस पाएं और मैप को शुरू करते समय विकल्प सेट करें:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

शुरुआत करने के बाद, map इंस्टेंस पर विकल्प सेट करें. इसके लिए, यहां दिया गया तरीका अपनाएं:

map.setOptions({
    zoom: 8,
});

खास जानकारी

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

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

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

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

मैप इंस्टेंस पर प्रॉपर्टी सेट करना और पाना

gmp-map एलिमेंट से मैप इंस्टेंस पाना

div एलिमेंट से मैप इंस्टेंस पाना

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

`div` एलिमेंट (लेगसी) और JavaScript का इस्तेमाल करके मैप जोड़ना

`gmp-map` एलिमेंट से मैप इंस्टेंस पाना

`div` एलिमेंट से मैप इंस्टेंस पाना