मार्कर

मैप पर किसी जगह पर उपयोगकर्ता का ध्यान खींचने के लिए, मार्कर का इस्तेमाल करें. इस गाइड में, 3D मैप में मार्कर इस्तेमाल करने और उन्हें पसंद के मुताबिक बनाने का तरीका बताया गया है. मार्कर के आकार, साइज़, और रंग को कंट्रोल किया जा सकता है. इसके अलावा, यह भी तय किया जा सकता है कि वे किस ऊंचाई पर दिखें. इस उदाहरण में, एक बेसिक मार्कर दिखाया गया है:

Maps JavaScript में 3D Maps, दो अलग-अलग मार्कर क्लास उपलब्ध कराता है. हर क्लास को खास इस्तेमाल के लिए ऑप्टिमाइज़ किया गया है. यहां दी गई टेबल में, उपलब्ध दोनों क्लास के बीच के अंतर और उनके फ़ायदों और नुकसानों के बारे में बताया गया है:

अनुमति	MarkerElement	Marker3DElement
कस्टमाइज़ेशन	ज़्यादा (इसमें कस्टम एचटीएमएल एलिमेंट, कोर ऐनिमेशन एपीआई वगैरह काम करते हैं)	कम (इसमें कम बदलाव किया जा सकता है)
परफ़ॉर्मेंस	इंटरैक्शन की परफ़ॉर्मेंस कम होना (ज़्यादा मार्कर होने पर एफ़पीएस कम हो जाते हैं)	बेहतर इंटरैक्शन परफ़ॉर्मेंस (बड़े डेटासेट को रेंडर करने के लिए ऑप्टिमाइज़ किया गया)
सुझाई गई क्षमता	ज़्यादा से ज़्यादा 1,000 मार्कर के साथ भरोसेमंद इंटरैक्शन परफ़ॉर्मेंस	एक हज़ार से ज़्यादा मार्कर मैनेज करने के लिए सुझाया गया

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

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

डिफ़ॉल्ट मार्कर आइकॉन को कस्टम एसवीजी संसाधन से बदलें.

मार्कर की ऊंचाई सेट करना

मार्कर को बाहर निकालकर और ऊंचाई सेट करके, मार्कर की ऊंचाई सेट की जा सकती है.

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

click इवेंट लिसनर जोड़कर, मार्कर को क्लिक और कीबोर्ड इवेंट पर प्रतिक्रिया देने के लिए सेट करें.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

मार्कर कोलिशन का व्यवहार सेट करना

यह तय करें कि किसी अन्य मार्कर या मैप लेबल से टकराने पर मार्कर का व्यवहार कैसा होना चाहिए.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

मार्कर की परफ़ॉर्मेंस

कस्टम एचटीएमएल मार्कर (MarkerElement), स्टैंडर्ड 3D मार्कर (Marker3DElement) के मुकाबले कम परफ़ॉर्म करते हैं. अगर किसी ऐप्लिकेशन में 1,000 से ज़्यादा मार्कर हैं, तो हमारा सुझाव है कि आप Marker3dElement क्लास का इस्तेमाल करें, ताकि बेहतर परफ़ॉर्मेंस मिल सके.

अगला चरण

• मार्कर जोड़ना