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

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

बेहतर मार्कर, मार्कर को तय करने के लिए दो क्लास का इस्तेमाल करते हैं: AdvancedMarkerElement क्लास में मार्कर की डिफ़ॉल्ट सुविधा मिलती है और PinElement में, मार्कर को अपनी पसंद के मुताबिक बनाने के विकल्प होते हैं. इस पेज में, मार्कर को कस्टमाइज़ करने का तरीका बताया गया है.

  • टाइटल के लिए टेक्स्ट जोड़ें
  • मार्कर को स्केल करें
  • बैकग्राउंड का रंग बदलना
  • बॉर्डर का रंग बदलें
  • ग्लिफ़ का रंग बदलें
  • ग्लिफ़ छिपाएं
बेहतर मार्कर के हिस्सों को दिखाने वाला डायग्राम.
पहली इमेज: बेहतर मार्कर के हिस्से.

टाइटल के लिए टेक्स्ट जोड़ें

जब कर्सर किसी मार्कर पर घूमता है, तब टाइटल टेक्स्ट दिखता है. टाइटल का टेक्स्ट, स्क्रीन रीडर ऐक्सेस कर सकता है. मार्कर में टाइटल टेक्स्ट जोड़ने के लिए, AdvancedMarkerElement.title विकल्प का इस्तेमाल करें:

TypeScript

// 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.ts

JavaScript

// 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

मार्कर को स्केल करें

मार्कर का स्केल एडजस्ट करने के लिए PinElement.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.03 },
    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.03 },
  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.02 },
    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.02 },
  content: pinGlyph.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.01 },
    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.01 },
  content: pinNoGlyph.element,
});
index.js

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

आगे क्या करें: