खास जानकारी

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

अगला कदम

• बेहतर मार्कर का इस्तेमाल शुरू करना