मार्कर के बारे में खास जानकारी

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

मैप पर किसी एक जगह को दिखाने के लिए, मार्कर का इस्तेमाल करें. इस गाइड में, ऐडवांस मार्कर इस्तेमाल करने का तरीका बताया गया है. ऐडवांस मार्कर की मदद से, बेहतरीन परफ़ॉर्मेंस वाले मार्कर बनाए जा सकते हैं और उन्हें पसंद के मुताबिक बनाया जा सकता है. साथ ही, ऐसे मार्कर बनाए जा सकते हैं जो gmp-click इवेंट और कीबोर्ड इनपुट के हिसाब से काम करते हैं. बेहतर कस्टमाइज़ेशन के लिए, ऐडवांस मार्कर कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करते हैं. इसमें पूरी तरह से कस्टम मार्कर बनाने की सुविधा भी शामिल है. 3D ऐप्लिकेशन के लिए, आप उस ऊंचाई को नियंत्रित कर सकते हैं जिस पर मार्कर दिखाई देता है. ऐडवांस मार्कर, रास्टर और वेक्टर मैप, दोनों पर काम करते हैं. हालांकि, कुछ सुविधाएं रास्टर मैप पर उपलब्ध नहीं हैं. ऐडवांस मार्कर इस्तेमाल करने के लिए, मैप आईडी ज़रूरी है. इसके लिए, DEMO_MAP_ID का इस्तेमाल किया जा सकता है.

ऐडवांस मार्कर का इस्तेमाल शुरू करना

रंग, स्केल, और आइकॉन की इमेज को पसंद के मुताबिक बनाना

डिफ़ॉल्ट मार्कर के बैकग्राउंड, ग्लिफ़, और बॉर्डर के रंग को पसंद के मुताबिक बनाएं. साथ ही, मार्कर का साइज़ अडजस्ट करें.

पसंद के मुताबिक बनाए गए कुछ मार्कर दिखाने वाला स्क्रीनशॉट.

डिफ़ॉल्ट मार्कर आइकॉन को कस्टम SVG या PNG इमेज से बदलें.

कस्टम एसवीजी मार्कर दिखाने वाला स्क्रीनशॉट.

कस्टम एचटीएमएल मार्कर बनाना

कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करके, विज़ुअल तौर पर अलग दिखने वाले इंटरैक्टिव मार्कर बनाएं और ऐनिमेशन बनाएं.

कस्टम एचटीएमएल मार्कर दिखाने वाला स्क्रीनशॉट.

मार्कर को क्लिक और कीबोर्ड इवेंट के हिसाब से काम करने लायक बनाना

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

ऊंचाई के हिसाब से अडजस्ट किए गए मार्कर को दिखाने वाला स्क्रीनशॉट.

अगला चरण