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

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

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

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

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

एचटीएमएल का इस्तेमाल करके बनाए गए मैप में, मार्कर के बुनियादी पैरामीटर 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 markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

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

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
index.js

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

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
index.js

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

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

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
index.js

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

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
index.js

ऊंचाई बदलना

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

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});
index.js

मार्कर हटाना

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

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

अगले चरण

• ग्राफ़िक्स की मदद से मार्कर बनाना