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