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

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

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

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

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

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

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

    const { AdvancedMarkerElement } = 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>

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

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

<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

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

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

একটি ম্যাপে প্রোগ্রাম্যাটিকভাবে একটি উন্নত মার্কার যোগ করতে, একটি নতুন AdvancedMarkerElement তৈরি করুন, হয় একটি LatLng বা LatLngAltitude পাস করে এবং বেসম্যাপের একটি রেফারেন্স, যেমন এই উদাহরণে দেখানো হয়েছে:

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

মানচিত্র থেকে একটি মার্কার সরাতে, হয় markerView.map বা position null এ সেট করুন।

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

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

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

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 map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

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

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.4239163, lng: -122.0947209 },
  });
}

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>Default Advanced Marker</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

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

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

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

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

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

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

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

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

    const { AdvancedMarkerElement } = 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>

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

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

<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

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

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

একটি ম্যাপে প্রোগ্রাম্যাটিকভাবে একটি উন্নত মার্কার যোগ করতে, একটি নতুন AdvancedMarkerElement তৈরি করুন, হয় একটি LatLng বা LatLngAltitude পাস করে এবং বেসম্যাপের একটি রেফারেন্স, যেমন এই উদাহরণে দেখানো হয়েছে:

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

মানচিত্র থেকে একটি মার্কার সরাতে, হয় markerView.map বা position null এ সেট করুন।

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

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

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

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 map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

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

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.4239163, lng: -122.0947209 },
  });
}

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>Default Advanced Marker</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

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

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