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