একটি ওয়েব পৃষ্ঠায় একটি Google মানচিত্র যোগ করুন

আপনি HTML, CSS, এবং JavaScript কোড ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি Google মানচিত্র যোগ করতে পারেন। এই পৃষ্ঠাটি দেখায় কিভাবে একটি ওয়েব পৃষ্ঠায় দুটি উপায়ে একটি মানচিত্র যুক্ত করতে হয়: gmp-map কাস্টম HTML উপাদান ব্যবহার করে এবং একটি div উপাদান ব্যবহার করে৷

ওভারভিউ

একটি মানচিত্র লোড করতে, আপনার ওয়েব পৃষ্ঠাটি অবশ্যই নিম্নলিখিত জিনিসগুলি করতে হবে:

  • একটি বুটস্ট্র্যাপ লোডার ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন। এখানেই আপনার API কী পাস করা হয়েছে এবং HTML বা JavaScript সোর্স ফাইলগুলিতে যোগ করা যেতে পারে।
  • HTML পৃষ্ঠায় মানচিত্র যোগ করুন এবং প্রয়োজনীয় CSS শৈলী যোগ করুন।
  • maps লাইব্রেরি লোড করুন এবং মানচিত্রটি শুরু করুন।

একটি gmp-map উপাদান ব্যবহার করে একটি মানচিত্র যোগ করুন

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

  1. HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ ধারণকারী একটি script উপাদান যোগ করুন। নিম্নলিখিত উদাহরণে বুটস্ট্র্যাপ, callback প্যারামিটারটি বাদ দেওয়া হয়েছে, কারণ এটির প্রয়োজন নেই।

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer>
</script>

  2. HTML পৃষ্ঠায়, একটি gmp-map উপাদান যোগ করুন। center জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবং zoom জন্য একটি জুম মান নির্দিষ্ট করুন৷ এই উদাহরণে height শৈলী বৈশিষ্ট্যটিও নির্দিষ্ট করা হয়েছে। 

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

সম্পূর্ণ উদাহরণ কোড 

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

একটি div উপাদান এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন

একটি div উপাদান ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি মানচিত্র যোগ করতে, নিম্নলিখিত পদক্ষেপগুলি নিন৷

  1. HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ লোডার ধারণকারী একটি script উপাদান যোগ করুন। বিকল্পভাবে, বুটস্ট্র্যাপ লোডার কোডটি সরাসরি একটি টাইপস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট ফাইলে যোগ করুন, script ট্যাগগুলিকে বিয়োগ করুন।

    <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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

  2. HTML পৃষ্ঠায়, মানচিত্র ধারণ করতে একটি div উপাদান যোগ করুন।

    <div id="map"></div>

  3. CSS-এ, মানচিত্রের উচ্চতা 100% সেট করুন।

    #map {
  height: 100%;
}

  4. জাভাস্ক্রিপ্ট ফাইলে, maps লাইব্রেরি লোড করার জন্য একটি ফাংশন তৈরি করুন এবং মানচিত্রটি শুরু করুন। center জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবং zoom জন্য ব্যবহার করার জন্য জুম স্তর নির্দিষ্ট করুন৷ 

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
index.js

সম্পূর্ণ উদাহরণ কোড

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

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

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

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>Simple Map</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, CSS, এবং JavaScript কোড ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি Google মানচিত্র যোগ করতে পারেন। এই পৃষ্ঠাটি দেখায় কিভাবে একটি ওয়েব পৃষ্ঠায় দুটি উপায়ে একটি মানচিত্র যুক্ত করতে হয়: gmp-map কাস্টম HTML উপাদান ব্যবহার করে এবং একটি div উপাদান ব্যবহার করে৷

ওভারভিউ

একটি মানচিত্র লোড করতে, আপনার ওয়েব পৃষ্ঠাটি অবশ্যই নিম্নলিখিত জিনিসগুলি করতে হবে:

  • একটি বুটস্ট্র্যাপ লোডার ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন। এখানেই আপনার API কী পাস করা হয়েছে এবং HTML বা JavaScript সোর্স ফাইলগুলিতে যোগ করা যেতে পারে।
  • HTML পৃষ্ঠায় মানচিত্র যোগ করুন এবং প্রয়োজনীয় CSS শৈলী যোগ করুন।
  • maps লাইব্রেরি লোড করুন এবং মানচিত্রটি শুরু করুন।

একটি gmp-map উপাদান ব্যবহার করে একটি মানচিত্র যোগ করুন

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

  1. HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ ধারণকারী একটি script উপাদান যোগ করুন। নিম্নলিখিত উদাহরণে বুটস্ট্র্যাপ, callback প্যারামিটারটি বাদ দেওয়া হয়েছে, কারণ এটির প্রয়োজন নেই।

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer>
</script>

  2. HTML পৃষ্ঠায়, একটি gmp-map উপাদান যোগ করুন। center জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবং zoom জন্য একটি জুম মান নির্দিষ্ট করুন৷ এই উদাহরণে height শৈলী বৈশিষ্ট্যটিও নির্দিষ্ট করা হয়েছে। 

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

সম্পূর্ণ উদাহরণ কোড 

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

একটি div উপাদান এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন

একটি div উপাদান ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি মানচিত্র যোগ করতে, নিম্নলিখিত পদক্ষেপগুলি নিন৷

  1. HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ লোডার ধারণকারী একটি script উপাদান যোগ করুন। বিকল্পভাবে, বুটস্ট্র্যাপ লোডার কোডটি সরাসরি একটি টাইপস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট ফাইলে যোগ করুন, script ট্যাগগুলিকে বিয়োগ করুন।

    <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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

  2. HTML পৃষ্ঠায়, মানচিত্র ধারণ করতে একটি div উপাদান যোগ করুন।

    <div id="map"></div>

  3. CSS-এ, মানচিত্রের উচ্চতা 100% সেট করুন।

    #map {
  height: 100%;
}

  4. জাভাস্ক্রিপ্ট ফাইলে, maps লাইব্রেরি লোড করার জন্য একটি ফাংশন তৈরি করুন এবং মানচিত্রটি শুরু করুন। center জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবং zoom জন্য ব্যবহার করার জন্য জুম স্তর নির্দিষ্ট করুন৷ 

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
index.js

সম্পূর্ণ উদাহরণ কোড

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

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

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

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

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