बेहतर मार्कर की मदद से, बेहतर परफ़ॉर्म करने वाले मार्कर बनाए और कस्टमाइज़ किए जा सकते हैं. डिफ़ॉल्ट मार्कर के बैकग्राउंड, बॉर्डर, और ग्लिफ़ रंग को पसंद के मुताबिक बनाएं, मार्कर का साइज़ बदलें, और डिफ़ॉल्ट मार्कर आइकॉन को कस्टम ग्राफ़िक इमेज से बदलें. आपके पास ऐसे ऐक्सेस किए जा सकने वाले मार्कर बनाने का विकल्प है जो डीओएम क्लिक इवेंट और कीबोर्ड इनपुट का जवाब देते हैं. ज़्यादा बेहतर कस्टमाइज़ेशन के लिए, बेहतर मार्कर कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करते हैं. इनमें पूरी तरह से कस्टम मार्कर बनाने की सुविधा भी शामिल है. 3D ऐप्लिकेशन के लिए, आपके पास उस ऊंचाई को कंट्रोल करने का विकल्प होता है जिस पर मार्कर दिखता है. बेहतर मार्कर, रास्टर और वेक्टर मैप, दोनों पर काम करते हैं (मैप आईडी ज़रूरी है).
बेहतर मार्कर का इस्तेमाल शुरू करना
रंग, स्केल, और आइकॉन इमेज को पसंद के मुताबिक बनाएं
डिफ़ॉल्ट मार्कर का बैकग्राउंड, ग्लिफ़, और बॉर्डर का रंग पसंद के मुताबिक बनाएं. साथ ही, मार्कर का साइज़ भी अडजस्ट करें.
डिफ़ॉल्ट मार्कर आइकॉन को पसंद के मुताबिक बनाई गई SVG या PNG इमेज से बदलें.
कस्टम एचटीएमएल मार्कर बनाएं
दिखने में बिलकुल अलग इंटरैक्टिव मार्कर बनाने और ऐनिमेशन बनाने के लिए, कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करें.
मार्कर को क्लिक और कीबोर्ड इवेंट के हिसाब से ट्रिगर करें
click इवेंट लिसनर को जोड़कर, मार्कर को क्लिक और कीबोर्ड इवेंट के हिसाब से बनाएं.
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4239163, lng: -122.0947209},
zoom: 17,
mapId: 'DEMO_MAP_ID',
});
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
marker.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
मार्कर की ऊंचाई और टकराव का व्यवहार सेट करें
मार्कर की ऊंचाई सेट करें, ताकि वह 3D मैप एलिमेंट के साथ सही तरीके से दिखे. साथ ही, यह भी बताएं कि किसी मार्कर या मैप के लेबल से टकराने पर, मार्कर को कैसा व्यवहार करना चाहिए. मार्कर की ऊंचाई सिर्फ़ वेक्टर मैप पर काम करती है.
