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

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

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

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

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

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

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

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

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

मार्कर की ऐडवांस सुविधाओं के बारे में जानें

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