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

प्लैटफ़ॉर्म चुनें: 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>

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

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

ध्यान दें: React जैसे कुछ फ़्रेमवर्क, रेंडरिंग के दौरान डीओएम नोड को अपने-आप जोड़ते और हटाते हैं.ऐसा हो सकता है कि वे मार्कर के डीओएम नोड को अलग से जोड़ने और हटाने के साथ काम न करें. उदाहरण के लिए, 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.
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

// This example adds a map with markers, using web components.
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="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&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>
index.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);
}
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में जानने के लिए, गाइड पढ़ें.

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);
}
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')!;

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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();
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="./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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

अगले चरण

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