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

21 फ़रवरी, 2024 (वर्शन 3.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.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

ऐडवांस मार्कर की सुविधाएं एक्सप्लोर करना

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

• मैप में मार्कर जोड़ना.
• मार्कर को पसंद के मुताबिक बनाने की बुनियादी सेटिंग
• ग्राफ़िक की मदद से मार्कर बनाना
• एचटीएमएल और सीएसएस की मदद से मार्कर बनाना
• टकराव के व्यवहार, ऊंचाई, और दिखने की सेटिंग को कंट्रोल करना
• मार्कर को क्लिक किया जा सकने वाला और ऐक्सेस किया जा सकने वाला बनाना