বেসিক মার্কার কাস্টমাইজেশন, বেসিক মার্কার কাস্টমাইজেশন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

উন্নত মার্কারগুলি মার্কারগুলিকে সংজ্ঞায়িত করতে দুটি শ্রেণী ব্যবহার করে: AdvancedMarkerElement ক্লাস ডিফল্ট মার্কার কার্যকারিতা প্রদান করে এবং PinElement আরও কাস্টমাইজেশনের বিকল্প রয়েছে৷ এই পৃষ্ঠাটি আপনাকে নিম্নলিখিত উপায়ে মার্কার কাস্টমাইজ করতে দেখায়:

  • শিরোনাম টেক্সট যোগ করুন
  • মার্কার স্কেল করুন
  • পটভূমির রঙ পরিবর্তন করুন
  • সীমানার রঙ পরিবর্তন করুন
  • গ্লিফের রঙ পরিবর্তন করুন
  • গ্লিফ লুকান
একটি অ্যাডভান্স মার্কারের অংশগুলি দেখানো একটি চিত্র৷
চিত্র 1 : একটি উন্নত মার্কার অংশ।

শিরোনাম টেক্সট যোগ করুন

কার্সার একটি মার্কারের উপর ঘোরার সময় শিরোনাম পাঠ্য উপস্থিত হয়। শিরোনাম পাঠ্য স্ক্রিন পাঠকদের দ্বারা পাঠযোগ্য। একটি মার্কারে শিরোনাম পাঠ্য যোগ করতে 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.ts

জাভাস্ক্রিপ্ট

// 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 বিকল্পটি ব্যবহার করুন:

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

// 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 বিকল্পটি ব্যবহার করুন:

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

// 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 বিকল্পটি ব্যবহার করুন:

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

// 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 বিকল্পটি ব্যবহার করুন:

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

// 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 বিকল্পটিকে একটি খালি স্ট্রিং-এ সেট করুন:

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

// 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 এর মতো একই মান সেট করুন। এটি গ্লিফটিকে দৃশ্যত লুকিয়ে রাখার প্রভাব রয়েছে।

পরবর্তী পদক্ষেপ: