मार्कर को बनाने की बुनियादी सेटिंग

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

बेहतर मार्कर, मार्कर तय करने के लिए दो क्लास का इस्तेमाल करते हैं: AdvancedMarkerElement क्लास, बुनियादी पैरामीटर (position, title, और map) उपलब्ध कराती है. साथ ही, PinElement क्लास में, मार्कर को पसंद के मुताबिक बनाने के लिए विकल्प होते हैं. नीचे दिया गया स्निपेट, नया PinElement बनाने और फिर उसे मार्कर पर लागू करने का कोड दिखाता है.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

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

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

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

  marker.appendChild(pin.element);
}

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

बेहतर मार्कर के हिस्से.
पहली इमेज: बेहतर मार्कर के हिस्से.

टाइटल का टेक्स्ट जोड़ना

जब कर्सर किसी मार्कर पर होवर करता है, तब शीर्षक टेक्स्ट दिखाई देता है. टाइटल टेक्स्ट को स्क्रीन रीडर पढ़ सकते हैं.

प्रोग्राम के हिसाब से शीर्षक टेक्स्ट जोड़ने के लिए, AdvancedMarkerElement.title का इस्तेमाल करें विकल्प:

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

एचटीएमएल का इस्तेमाल करके बनाए गए मार्कर में टाइटल टेक्स्ट जोड़ने के लिए, title एट्रिब्यूट का इस्तेमाल करें:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

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

मार्कर को स्केल करने के लिए, scale विकल्प का इस्तेमाल करें.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

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

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

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

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

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

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

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

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

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

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

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

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

ग्लिफ़ छिपाएं

मार्कर का ग्लिफ़ छिपाने के लिए, PinElement.glyph विकल्प को खाली स्ट्रिंग पर सेट करें:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.005 },
  content: pinNoGlyph.element,
});
index.js

इसके अलावा, PinElement.glyphColor को PinElement.background की वैल्यू पर सेट करें. इसमें ग्लिफ़ को विज़ुअल तौर पर छिपाने का असर होता है.

अगले चरण: