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

मैप में मार्कर जोड़ना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके मार्कर जोड़ना
प्रोग्राम के हिसाब से मार्कर जोड़ना

ऐडवांस मार्कर लाइब्रेरी लोड करना

किसी मैप में ऐडवांस मार्कर जोड़ने के लिए, आपके मैप कोड को marker लाइब्रेरी लोड करनी होगी. यह लाइब्रेरी, AdvancedMarkerElement और PinElement क्लास उपलब्ध कराती है. यह इस बात पर निर्भर नहीं करता कि आपका ऐप्लिकेशन, मार्कर को प्रोग्राम के हिसाब से लोड करता है या एचटीएमएल का इस्तेमाल करके. इसके लिए, आपके ऐप्लिकेशन को सबसे पहले Maps JavaScript API लोड करना होगा.

लाइब्रेरी लोड करने के लिए इस्तेमाल किया जाने वाला तरीका, इस बात पर निर्भर करता है कि आपका वेब पेज, Maps JavaScript API को कैसे लोड करता है.

अगर आपके वेब पेज पर डाइनैमिक स्क्रिप्ट लोडिंग का इस्तेमाल किया जाता है, तो मार्कर लाइब्रेरी जोड़ें. साथ ही, यहां दिखाए गए तरीके से रनटाइम पर AdvancedMarkerElement (और चाहें, तो PinElement) इंपोर्ट करें.
```
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
```
अगर आपके वेब पेज पर डायरेक्ट स्क्रिप्ट लोडिंग टैग का इस्तेमाल किया जाता है, तो लोडिंग स्क्रिप्ट में libraries=marker जोड़ें. जैसा कि यहां दिए गए स्निपेट में दिखाया गया है. ऐसा करने पर, AdvancedMarkerElement और PinElement, दोनों को इंपोर्ट किया जाएगा.
```
<script
src="/proxy/https/maps.googleapis.com/maps/api/js?key=YOUR_API_KEY%3Cspan%20class="devsite-syntax-err">&callback=initMap&v=weekly&libraries=marker"
defer
></script>
```

मैप आईडी सेट करना

ऐडवांस मार्कर का इस्तेमाल करने के लिए, मैप आईडी ज़रूरी है. इसके लिए, DEMO_MAP_ID का इस्तेमाल किया जा सकता है. मैप के विकल्पों में मैप आईडी सेट करें. जैसा कि यहां दिखाया गया है:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

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

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

मैप आईडी के बारे में ज़्यादा जानें.

कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके मार्कर जोड़ना

ध्यान दें: React जैसे कुछ फ़्रेमवर्क, रेंडरिंग के दौरान DOM नोड को अपने-आप जोड़ते और हटाते हैं.इसलिए, हो सकता है कि ये फ़्रेमवर्क, मार्कर और उनसे जुड़े DOM नोड को अलग-अलग जोड़ने और हटाने की सुविधा के साथ काम न करें. उदाहरण के लिए, Maps JavaScript API कंस्ट्रक्टर और प्रॉपर्टी का इस्तेमाल करते समय ऐसा हो सकता है. अगर आपको ऐसे फ़्रेमवर्क में मार्कर मैनेज करने वाले किसी अन्य कोड या लाइब्रेरी का इस्तेमाल करना है, तो आपको सिर्फ़ JavaScript सिंटैक्स का इस्तेमाल करके मार्कर जोड़ने और हटाने पड़ सकते हैं. उदाहरण के लिए, new AdvancedMarker({map}).

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

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>index.html

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

इस उदाहरण में, एचटीएमएल का इस्तेमाल करके मार्कर वाला मैप बनाने का तरीका दिखाया गया है.

TypeScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();index.js

सीएसएस

/* Note: This CSS file is intentionally blank. */style.css

एचटीएमएल

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="/proxy/https/developers.google.com/maps/documentation/javascript/advanced-markers/index.js"></script>
        <script
            src="/proxy/https/maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&amp;libraries=maps,marker&amp;v=weekly&amp;internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>index.html

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

JSFiddle.net

प्रोग्राम के हिसाब से मार्कर जोड़ना

मैप में प्रोग्राम के हिसाब से ऐडवांस मार्कर जोड़ने के लिए, एक नया AdvancedMarkerElement बनाएं और उसे मैप में जोड़ें. इसके लिए, यहां दिया गया उदाहरण देखें:

TypeScript

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}index.js

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

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

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

मार्कर हटाना

मैप से मार्कर हटाने के लिए, marker.map या marker.position को null पर सेट करें.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

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

इस उदाहरण में, मैप में मार्कर जोड़ने का तरीका बताया गया है.

TypeScript

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();index.js

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

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

एचटीएमएल

<html>
    <head>
        <title>Default Advanced Marker</title>

        <link rel="stylesheet" type="text/css" href="/proxy/https/developers.google.com/maps/documentation/javascript/advanced-markers/style.css" />
        <script type="module" src="/proxy/https/developers.google.com/maps/documentation/javascript/advanced-markers/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=/proxy/https/developers.google.com/maps/documentation/javascript/advanced-markers/%60https://maps.$%7Bc%7Dapis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=&gt;h=n(Error(p+%22 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="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

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

JSFiddle.net

अगले चरण

मार्कर को बुनियादी तौर पर पसंद के मुताबिक बनाना