मार्कर की खास जानकारी

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

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

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

अगला चरण