একটি মানচিত্রে একটি মার্কার যোগ করুন

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

মানচিত্রে নির্দিষ্ট স্থান প্রদর্শন করতে মার্কার ব্যবহার করুন। এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে প্রোগ্রাম্যাটিকভাবে এবং কাস্টম HTML এলিমেন্ট ব্যবহার করে মানচিত্রে মার্কার যুক্ত করা যায়।

• কাস্টম HTML এলিমেন্ট ব্যবহার করে একটি মার্কার যোগ করুন
• প্রোগ্রাম্যাটিকভাবে একটি মার্কার যোগ করুন

উন্নত মার্কার লাইব্রেরি লোড করুন

ম্যাপে একটি অ্যাডভান্সড মার্কার যোগ করার জন্য, আপনার ম্যাপ কোডকে অবশ্যই marker লাইব্রেরি লোড করতে হবে, যা AdvancedMarkerElement এবং PinElement ক্লাসগুলো সরবরাহ করে। আপনার অ্যাপ প্রোগ্রাম্যাটিকভাবে বা HTML ব্যবহার করে মার্কার লোড করুক না কেন, এই নিয়মটি প্রযোজ্য। এটি করার জন্য, আপনার অ্যাপকে প্রথমে ম্যাপস জাভাস্ক্রিপ্ট এপিআই (Maps JavaScript API) লোড করতে হবে।

আপনার ওয়েব পেজ কীভাবে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করে, তার ওপর নির্ভর করে আপনি লাইব্রেরি লোড করার পদ্ধতি ব্যবহার করবেন।

• আপনার ওয়েব পেজে যদি ডাইনামিক স্ক্রিপ্ট লোডিং ব্যবহার করা হয়, তাহলে এখানে দেখানো পদ্ধতি অনুযায়ী রানটাইমে মার্কার লাইব্রেরিটি যোগ করুন এবং AdvancedMarkerElement (এবং ঐচ্ছিকভাবে PinElement ) ইম্পোর্ট করুন।

  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

• আপনার ওয়েব পেজ যদি সরাসরি স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করে, তাহলে লোডিং স্ক্রিপ্টে libraries=marker যোগ করুন, যেমনটি নিচের কোড স্নিপেটে দেখানো হয়েছে। এটি করলে AdvancedMarkerElement এবং PinElement উভয়ই ইম্পোর্ট হয়ে যাবে।

  <script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
  defer
  ></script>

একটি মানচিত্র আইডি সেট করুন

অ্যাডভান্সড মার্কার ব্যবহার করার জন্য একটি ম্যাপ আইডি প্রয়োজন ( DEMO_MAP_ID ব্যবহার করা যেতে পারে)। ম্যাপ অপশনে একটি ম্যাপ আইডি সেট করুন, যেমনটি এখানে দেখানো হয়েছে:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

আপনি যদি ওয়েব কম্পোনেন্ট ব্যবহার করেন, তাহলে সরাসরি gmp-map এলিমেন্টে ম্যাপ আইডি সেট করতে পারেন:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

ম্যাপ আইডি সম্পর্কে আরও জানুন ।

কাস্টম HTML এলিমেন্ট ব্যবহার করে একটি মার্কার যোগ করুন

দ্রষ্টব্য: React-এর মতো কিছু ফ্রেমওয়ার্ক রেন্ডারিংয়ের সময় স্বয়ংক্রিয়ভাবে DOM নোড যোগ ও অপসারণ করে, এবং এগুলি মার্কারের সংশ্লিষ্ট DOM নোডগুলিকে স্বাধীনভাবে যোগ ও অপসারণ করার ক্ষেত্রে অসামঞ্জস্যপূর্ণ হতে পারে (যেমন Maps JavaScript API কনস্ট্রাক্টর এবং প্রোপার্টি ব্যবহার করার সময়)। এই ধরনের ফ্রেমওয়ার্কে যদি আপনি অন্য কোনো মার্কার-পরিচালনাকারী কোড বা লাইব্রেরি ব্যবহার করতে চান, তাহলে আপনাকে শুধুমাত্র জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করে মার্কার যোগ ও অপসারণ করতে হতে পারে (যেমন new AdvancedMarker({map}) )।

কাস্টম HTML এলিমেন্ট ব্যবহার করে একটি অ্যাডভান্সড মার্কার যোগ করতে, gmp-map এলিমেন্টের মধ্যে একটি gmp-advanced-marker চাইল্ড এলিমেন্ট যোগ করুন। নিচের কোড স্নিপেটটিতে একটি ওয়েব পেজে মার্কার যোগ করার পদ্ধতি দেখানো হলো:

<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

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

এই উদাহরণটিতে HTML ব্যবহার করে মার্কারসহ একটি মানচিত্র তৈরি করা দেখানো হয়েছে।

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

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = 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;
}

gmp-map {
  height: 400px;
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

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

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

প্রোগ্রাম্যাটিকভাবে একটি মার্কার যোগ করুন

প্রোগ্রামের মাধ্যমে ম্যাপে একটি অ্যাডভান্সড মার্কার যোগ করতে, একটি নতুন AdvancedMarkerElement তৈরি করুন এবং এই উদাহরণে দেখানো অনুযায়ী এটিকে ম্যাপে যুক্ত করুন:

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

শুধুমাত্র ওয়েব কম্পোনেন্ট ব্যবহার করার সময়ই এলিমেন্ট যুক্ত করা সম্ভব। যদি ম্যাপ লোড করার জন্য div এলিমেন্ট ব্যবহার করা হয়, তাহলে এখানে দেখানো অনুযায়ী মার্কারটিকে ম্যাপ ইনস্ট্যান্সের সাথে যুক্ত করতে map প্রপার্টিটি ব্যবহার করুন:

myMap = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
});

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

ম্যাপ থেকে কোনো মার্কার সরাতে, marker.map অথবা marker.position null এ সেট করুন।

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

এই উদাহরণটি দেখায় কিভাবে একটি মানচিত্রে মার্কার যোগ করতে হয়।

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
index.js

সিএসএস

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

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

এইচটিএমএল

<html>
    <head>
        <title>Default Advanced Marker</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_advanced-markers" });</script>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

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

JSFiddle.net

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

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