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

प्लैटफ़ॉर्म चुनें: 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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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>

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

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

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

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

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

TypeScript

// This example adds a map with markers, using web components.

JavaScript

// This example adds a map with markers, using web components.

सीएसएस

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

एचटीएमएल

<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="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker"></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>

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

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

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

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

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

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

वेब कॉम्पोनेंट का इस्तेमाल करने पर ही, एलिमेंट जोड़े जा सकते हैं. अगर मैप लोड करने के लिए 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')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

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

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

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

सीएसएस

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

एचटीएमएल

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>

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

अगले चरण