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

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

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

এই উদাহরণটি নিম্নলিখিত উপায়ে মার্কারগুলিকে কীভাবে কাস্টমাইজ করা যায় তা দেখায়: শিরোনাম পাঠ্য যোগ করুন, মার্কারটি স্কেল করুন, পটভূমির রঙ পরিবর্তন করুন, বর্ডার রঙ পরিবর্তন করুন, গ্লাইফের রঙ পরিবর্তন করুন, গ্লাইফটি লুকান।

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

const parser = new DOMParser();

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.419, lng: -122.02 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    // Each PinElement is paired with a MarkerView to demonstrate setting each parameter.

    // 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',
    });

    // 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,
    });

    // 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,
    });

    // 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,
    });

    // 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,
    });

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

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

}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

const parser = new DOMParser();

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.419, lng: -122.02 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  // Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
  // 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",
  });
  // 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,
  });
  // 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,
  });
  // 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,
  });
  // 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,
  });
  const pinTextGlyph = new PinElement({
    glyph: "T",
    glyphColor: "white",
  });
  const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
  });
  // Hide the glyph.
  const pinNoGlyph = new PinElement({
    glyph: "",
  });
  const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Advanced Marker Basic Customization</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

উন্নত মার্কারগুলি মার্কারগুলিকে সংজ্ঞায়িত করার জন্য দুটি শ্রেণী ব্যবহার করে: AdvancedMarkerElement ক্লাস মৌলিক পরামিতি প্রদান করে ( position , title , এবং map ), এবং PinElement ক্লাসে আরও কাস্টমাইজেশনের বিকল্প রয়েছে৷

একটি মানচিত্রে মার্কার যোগ করার জন্য, আপনাকে প্রথমে marker লাইব্রেরি লোড করতে হবে যা AdvancedMarkerElement এবং 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,
});

এইচটিএমএল ব্যবহার করে তৈরি করা মানচিত্রে, একটি মার্কারের জন্য মৌলিক পরামিতিগুলিকে gmp-advanced-marker HTML উপাদান ব্যবহার করে ঘোষণা করা হয়; PinElement শ্রেণী ব্যবহার করে এমন কোনো কাস্টমাইজেশন অবশ্যই প্রোগ্রাম্যাটিকভাবে প্রয়োগ করতে হবে। এটি করার জন্য, আপনার কোডটি অবশ্যই HTML পৃষ্ঠা থেকে 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);
}

এই পৃষ্ঠাটি আপনাকে নিম্নলিখিত উপায়ে মার্কার কাস্টমাইজ করতে দেখায়:

• শিরোনাম টেক্সট যোগ করুন
• মার্কার স্কেল করুন
• পটভূমির রঙ পরিবর্তন করুন
• সীমানার রঙ পরিবর্তন করুন
• গ্লিফের রঙ পরিবর্তন করুন
• একটি গ্লিফে টেক্সট ব্যবহার করুন
• গ্লিফ লুকান

চিত্র 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.js

HTML ব্যবহার করে তৈরি একটি মার্কারে শিরোনাম পাঠ্য যোগ করতে, 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 বিকল্পটি ব্যবহার করুন।

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

// 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.035 },
    content: pinBorder.element,
});
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

// 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 সাথে মেলে।

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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

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

• গ্রাফিক্স দিয়ে মার্কার তৈরি করুন