सुरक्षा नोटिस: हमें सुरक्षा से जुड़ी एक समस्या का पता चला है. यह समस्या तीसरे पक्ष की कुछ लाइब्रेरी (इसमें polyfill.io शामिल है) का इस्तेमाल करने वाली वेबसाइटों पर असर डाल सकती है. इस समस्या की वजह से, वेबसाइट पर आने वाले लोगों को कभी-कभी अपनी वेबसाइट के मालिक की जानकारी या अनुमति के बिना ही, दूसरी वेबसाइट पर रीडायरेक्ट कर दिया जाता है. हमारे कई JavaScript सैंपल में, पहले से polyfill.io स्क्रिप्ट का एलान शामिल था. हमने इसे अपने सैंपल से हटा दिया है. अगर आपने हमारे JavaScript सैंपल का इस्तेमाल किया है और इनमें यह एलान शामिल है, तो हमारा सुझाव है कि आप इस एलान को हटा दें.

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

बेहतर मार्कर पर माइग्रेट करें

21 फ़रवरी, 2024 (v3.56) से google.maps.Marker को इस्तेमाल नहीं किया जा सकेगा. बुध आपको नए google.maps.marker.AdvancedMarkerElement पर संक्रमण करने के लिए प्रोत्साहित करते हैं क्लास. ऐडवांस मार्कर की मदद से, लेगसी वर्शन में काफ़ी सुधार किए गए हैं google.maps.Marker क्लास.

इस सुविधा के बंद होने के बारे में ज़्यादा जानें

लेगसी मार्कर को ऐडवांस मार्कर के तौर पर अपडेट करने के लिए, यह तरीका अपनाएं:

मार्कर लाइब्रेरी इंपोर्ट करने के लिए कोड जोड़ें. ध्यान दें कि मार्कर (google.maps.Marker) के लिए यह ज़रूरी नहीं है.
google.maps.Marker को google.maps.marker.AdvancedMarkerElement में बदलें
अपने मैप शुरू करने के कोड में मैप आईडी जोड़ें. उदाहरण के लिए अगर आपके पास मैप नहीं है, तो टेस्टिंग के लिए mapId: 'DEMO_MAP_ID' आईडी पहले से ही है.

Advanced मार्कर लाइब्रेरी जोड़ें

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

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

Maps JavaScript API को लोड करने के बारे में ज़्यादा जानें

उदाहरण

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

माइग्रेशन से पहले

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

माइग्रेशन के बाद

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

बेहतर मार्कर सुविधाओं को एक्सप्लोर करें

बेहतर मार्कर को ऐसे तरीकों से पसंद के मुताबिक बनाया जा सकता है जिन्हें पहले मुमकिन नहीं था. अब आप मार्कर का आकार (स्केल) समायोजित कर सकते हैं, और मार्कर का रंग बदल सकते हैं. बैकग्राउंड, बॉर्डर, और ग्लिफ़ शामिल हैं. कस्टम ग्राफ़िक इमेज पर काम करना आसान होता है, अब एचटीएमएल और सीएसएस का इस्तेमाल करके कस्टम मार्कर लिखे जा सकते हैं. ज़्यादा जानें यहां बताया गया है कि बेहतर मार्कर की मदद से क्या-क्या किया जा सकता है: