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'. अगर आपके पास पहले से मैप आईडी नहीं है, तो "DEMO_MAP_ID" का इस्तेमाल करना सही है.
Advanced मार्कर लाइब्रेरी जोड़ें
लाइब्रेरी लोड करने के लिए इस्तेमाल किया जाने वाला तरीका, इस बात पर निर्भर करता है कि आपका वेब पेज, 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',
});
माइग्रेशन के बाद
// 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',
});
बेहतर मार्कर सुविधाओं को एक्सप्लोर करें
बेहतर मार्कर को ऐसे तरीकों से पसंद के मुताबिक बनाया जा सकता है जिन्हें पहले मुमकिन नहीं था. अब मार्कर का साइज़ (स्केल) बदला जा सकता है. साथ ही, बैकग्राउंड, बॉर्डर, और ग्लिफ़ के रंग भी बदले जा सकते हैं. कस्टम ग्राफ़िक छवियों पर काम करना आसान होता है, और अब HTML और CSS का उपयोग करके कस्टम मार्कर लिखना संभव है. इस बारे में ज़्यादा जानें कि बेहतर मार्कर की मदद से क्या-क्या किया जा सकता है: