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