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

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

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

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

खास जानकारी

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

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

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

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

किसी एचटीएमएल पेज में, बूटस्ट्रैप वाला script एलिमेंट जोड़ें. इसके अलावा, इसे script एलिमेंट के बिना, JavaScript या TypeScript की सोर्स फ़ाइल में जोड़ें. अपने एपीआई पासकोड और अन्य विकल्पों के साथ बूटस्ट्रैप को कॉन्फ़िगर करें. आपके पास डाइनैमिक लाइब्रेरी इंपोर्ट या सीधे स्क्रिप्ट लोड करने का विकल्प होता है. इस उदाहरण में, किसी एचटीएमएल पेज में डाइनैमिक स्क्रिप्ट लोड करने वाला बूटस्ट्रैप जोड़ने का तरीका दिखाया गया है:
```
<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 लोड करने के बारे में ज़्यादा जानें
एचटीएमएल पेज पर, gmp-map एलिमेंट जोड़ें. center के लिए अक्षांश और देशांतर निर्देशांक (ज़रूरी), zoom के लिए ज़ूम की वैल्यू (ज़रूरी) डालें. साथ ही, ज़रूरत पड़ने पर map-id डालें. कुछ सुविधाओं के लिए यह ज़रूरी है. जैसे, बेहतर मार्कर.

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>index.html

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

TypeScript

async function initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>index.html

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

JSFiddle.net

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

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

किसी एचटीएमएल पेज में, बूटस्ट्रैप वाला script एलिमेंट जोड़ें. इसके अलावा, इसे script एलिमेंट के बिना, JavaScript या TypeScript की सोर्स फ़ाइल में जोड़ें. अपने एपीआई पासकोड और अन्य विकल्पों के साथ बूटस्ट्रैप को कॉन्फ़िगर करें. आपके पास डाइनैमिक लाइब्रेरी इंपोर्ट या सीधे स्क्रिप्ट लोड करने का विकल्प होता है. इस उदाहरण में, किसी एचटीएमएल पेज में डाइनैमिक बूटस्ट्रैप जोड़ने का तरीका दिखाया गया है:
```
<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% पर सेट करें. मैप को दिखाने के लिए, सीएसएस का height एट्रिब्यूट ज़रूरी है.
```
#map {
  height: 100%;
}
```
जेएस या टीएस फ़ाइल में, maps लाइब्रेरी लोड करने और मैप को शुरू करने के लिए कोई फ़ंक्शन बनाएं. center के लिए अक्षांश और देशांतर निर्देशांक डालें. साथ ही, zoom के लिए ज़ूम का लेवल डालें. ज़रूरत पड़ने पर, mapId प्रॉपर्टी का इस्तेमाल करके, मैप आईडी जोड़ें. मैप डिफ़ॉल्ट रूप से रास्टर पर सेट होगा. इसलिए, "VECTOR" मैप विकल्प तय करके, वेक्टर मैप का अनुरोध करें. बेहतर उपयोगकर्ता अनुभव के लिए, वेक्टर मैप टाइप इस्तेमाल करने का सुझाव दिया जाता है. इससे विज़ुअल फ़िडेलिटी बेहतर होती है. साथ ही, मैप को झुकाने और घुमाने की सुविधा मिलती है.
TypeScript
```
let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts
```
ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
JavaScript
```
let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js
```

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

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js

CSS

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

<html>

<head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- 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>
</head>

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

</html>index.html

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

JSFiddle.net

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

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

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

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

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 एलिमेंट का इस्तेमाल करके, मैप जोड़ना

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

TypeScript

JavaScript

CSS

HTML

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

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

TypeScript

JavaScript

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

TypeScript

JavaScript

CSS

HTML

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

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

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

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

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

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

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

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