मार्कर को पसंद के मुताबिक बनाना

3D मार्कर, मार्कर तय करने के लिए दो क्लास का इस्तेमाल करता है: 3DMarkerElement क्लास, बुनियादी पैरामीटर (position, label, और map) उपलब्ध कराती है. साथ ही, PinElement क्लास में मार्कर को पसंद के मुताबिक बनाने के विकल्प होते हैं.

मैप में मार्कर जोड़ने के लिए, आपको पहले मार्कर लाइब्रेरी को लोड करना होगा. इसमें 3DMarkerElement और PinElement क्लास उपलब्ध होती हैं.

यहां दिया गया स्निपेट, नया PinElement बनाने के लिए कोड दिखाता है. इसके बाद, इसे मार्कर पर लागू करता है:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

एचटीएमएल का इस्तेमाल करके बनाए गए मैप में, मार्कर के बुनियादी पैरामीटर gmp-marker-3d एचटीएमएल एलिमेंट का इस्तेमाल करके तय किए जाते हैं. PinElement क्लास का इस्तेमाल करके किया गया कोई भी कस्टमाइज़ेशन, प्रोग्राम के हिसाब से लागू किया जाना चाहिए. ऐसा करने के लिए, आपके कोड को एचटीएमएल पेज से gmp-marker-3d एलिमेंट वापस लाना होगा. नीचे दिया गया स्निपेट, gmp-marker-3d एलिमेंट के कलेक्शन के लिए क्वेरी करने का कोड दिखाता है. इसके बाद, gmp-marker-3d में बताए गए कस्टमाइज़ेशन को लागू करने के लिए, नतीजों को दोहराता है.

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

इस पेज पर, मार्कर को इन तरीकों से पसंद के मुताबिक बनाने का तरीका बताया गया है:

मार्कर का स्केल बदलना

मार्कर का स्केल बदलने के लिए, scale विकल्प का इस्तेमाल करें:

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

बैकग्राउंड का रंग बदलना

मार्कर के बैकग्राउंड का रंग बदलने के लिए, PinElement.background विकल्प का इस्तेमाल करें:

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

बॉर्डर का रंग बदलना

मार्कर के बॉर्डर का रंग बदलने के लिए, PinElement.borderColor विकल्प का इस्तेमाल करें:

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

ग्लिफ़ का रंग बदलना

मार्कर के ग्लिफ़ का रंग बदलने के लिए, PinElement.glyphColor विकल्प का इस्तेमाल करें:

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

किसी ग्लिफ़ में टेक्स्ट जोड़ना

डिफ़ॉल्ट ग्लिफ़ को टेक्स्ट वर्ण से बदलने के लिए, PinElement.glyph विकल्प का इस्तेमाल करें. PinElement का टेक्स्ट ग्लिफ़, PinElement के साथ स्केल होता है और उसका डिफ़ॉल्ट रंग, PinElement के डिफ़ॉल्ट glyphColor से मैच होता है:

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

ऊंचाई बदलना

मार्कर के ऊंचाई को बदलने और ज़मीन और मार्कर के बीच एक्सट्रूज़न वाली लाइन जोड़ने के लिए, Marker3DElement.position.altitude विकल्प के साथ Marker3DElement.altitudeMode और Marker3DElement.extruded का इस्तेमाल करें:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

मार्कर हटाना

मैप से मार्कर हटाने के लिए, Marker3DElement.remove() का इस्तेमाल करें:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

अगले चरण