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

ভূমিকা

এই টিউটোরিয়ালে দেখানো হয়েছে কীভাবে HTML, CSS, এবং JavaScript ব্যবহার করে একটি ওয়েব পেজে মার্কারসহ গুগল ম্যাপ যুক্ত করতে হয়। এছাড়াও এতে ম্যাপের অপশনগুলো কীভাবে সেট করতে হয় এবং কন্ট্রোল স্লটিং ব্যবহার করে ম্যাপে কীভাবে লেবেল যুক্ত করতে হয়, তাও দেখানো হয়েছে।

এই টিউটোরিয়ালটি ব্যবহার করে আপনি যে মানচিত্রটি তৈরি করবেন তা নিচে দেওয়া হলো। মার্কারটি উলুরু-কাটা জুটা ন্যাশনাল পার্কের অন্তর্গত উলুরুতে (যা আয়ার্স রক নামেও পরিচিত) স্থাপন করা হয়েছে।

শুরু করা হচ্ছে

আপনার ওয়েব পেজে মার্কার সহ একটি গুগল ম্যাপ তৈরি করার তিনটি ধাপ রয়েছে:

  1. একটি এপিআই কী পান
  2. একটি HTML পৃষ্ঠা তৈরি করুন
  3. মার্কার সহ একটি মানচিত্র যোগ করুন

আপনার একটি ওয়েব ব্রাউজার প্রয়োজন। সমর্থিত ব্রাউজারের তালিকা থেকে আপনার প্ল্যাটফর্মের উপর ভিত্তি করে গুগল ক্রোম (প্রস্তাবিত), ফায়ারফক্স, সাফারি বা এজ-এর মতো একটি সুপরিচিত ব্রাউজার বেছে নিন।

ধাপ ১: একটি এপিআই কী সংগ্রহ করুন।

এই অংশে ব্যাখ্যা করা হয়েছে কীভাবে আপনার নিজের এপিআই কী ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই-তে আপনার অ্যাপকে প্রমাণীকরণ করবেন।

এপিআই কী পেতে এই ধাপগুলো অনুসরণ করুন:

  1. গুগল ক্লাউড কনসোলে যান।

  2. একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।

  3. এপিআই এবং সংশ্লিষ্ট পরিষেবাগুলো সক্রিয় করতে 'চালিয়ে যান'-এ ক্লিক করুন।

  4. ক্রেডেনশিয়ালস পেজ থেকে একটি এপিআই কী সংগ্রহ করুন (এবং এপিআই কী-এর সীমাবদ্ধতাগুলো সেট করুন)। দ্রষ্টব্য: আপনার কাছে যদি আগে থেকেই কোনো সীমাবদ্ধতাহীন এপিআই কী, অথবা ব্রাউজার সীমাবদ্ধতাযুক্ত কোনো কী থাকে, তবে আপনি সেই কী-টি ব্যবহার করতে পারেন।

  5. কোটা চুরি রোধ করতে এবং আপনার এপিআই কী সুরক্ষিত রাখতে, এপিআই কী-এর ব্যবহার দেখুন।

  6. বিলিং চালু করুন। আরও তথ্যের জন্য ব্যবহার ও বিলিং দেখুন।

  7. একবার এপিআই কী পেয়ে গেলে, "YOUR_API_KEY"-এ ক্লিক করে নিচের কোড স্নিপেটে সেটি যোগ করুন। আপনার নিজের ওয়েব পেজে ব্যবহার করার জন্য বুটলোডার স্ক্রিপ্ট ট্যাগটি কপি করে পেস্ট করুন।

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

ধাপ ২: একটি HTML পৃষ্ঠা তৈরি করুন

এখানে একটি সাধারণ HTML ওয়েব পেজের কোড দেওয়া হলো:

<!DOCTYPE html>
<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>Add a Map</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: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

এটি একটি খুব সাধারণ HTML পৃষ্ঠা, যেখানে একটি মানচিত্র দেখানোর জন্য gmp-map এলিমেন্ট ব্যবহার করা হয়েছে। মানচিত্রটি ফাঁকা থাকবে, কারণ আমরা এখনও কোনো জাভাস্ক্রিপ্ট কোড যোগ করিনি।

কোডটি বুঝুন

উদাহরণটির এই পর্যায়ে, আমাদের আছে:

  • !DOCTYPE html ডিক্লারেশন ব্যবহার করে অ্যাপ্লিকেশনটিকে HTML5 হিসেবে ঘোষণা করা হয়েছে।
  • বুটস্ট্র্যাপ লোডার ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করা হয়েছে।
  • ম্যাপটি ধারণ করার জন্য একটি gmp-map এলিমেন্ট তৈরি করা হয়েছে।

আপনার অ্যাপ্লিকেশনটিকে HTML5 হিসেবে ঘোষণা করুন।

আমরা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনে একটি প্রকৃত DOCTYPE ঘোষণা করার পরামর্শ দিই। এখানের উদাহরণগুলিতে, আমরা নীচে দেখানো HTML5 DOCTYPE ব্যবহার করে আমাদের অ্যাপ্লিকেশনগুলিকে HTML5 হিসাবে ঘোষণা করেছি:

<!DOCTYPE html>

অধিকাংশ আধুনিক ব্রাউজার এই DOCTYPE দিয়ে ঘোষিত কন্টেন্টকে "স্ট্যান্ডার্ডস মোডে" রেন্ডার করে, যার অর্থ হলো আপনার অ্যাপ্লিকেশনটি বিভিন্ন ব্রাউজারের সাথে আরও বেশি সামঞ্জস্যপূর্ণ হবে। এই DOCTYPE এমনভাবে ডিজাইন করা হয়েছে যাতে এটি সময়ের সাথে সাথে ত্রুটি মার্জনা করতে পারে; যে ব্রাউজারগুলো এটি বোঝে না, তারা এটিকে উপেক্ষা করবে এবং তাদের নিজস্ব কন্টেন্ট প্রদর্শনের জন্য "কুইর্কস মোড" ব্যবহার করবে।

উল্লেখ্য যে, কুইর্কস মোডে কাজ করে এমন কিছু CSS স্ট্যান্ডার্ডস মোডে বৈধ নয়। বিশেষত, সমস্ত শতাংশ-ভিত্তিক আকার অবশ্যই প্যারেন্ট ব্লক এলিমেন্ট থেকে ইনহেরিট করতে হবে, এবং যদি সেই পূর্বপুরুষদের মধ্যে কেউ আকার নির্দিষ্ট করতে ব্যর্থ হয়, তবে ধরে নেওয়া হয় যে তাদের আকার ০ x ০ পিক্সেল। সেই কারণে, আমরা নিম্নলিখিত style ডিক্লারেশনটি অন্তর্ভুক্ত করেছি:

<style>
  gmp-map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন

বুটস্ট্র্যাপ লোডার Maps JavaScript API-কে লোড করার জন্য প্রস্তুত করে ( importLibrary() কল না করা পর্যন্ত কোনো লাইব্রেরি লোড হয় না)।

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

আপনার নিজের এপিআই কী পাওয়ার নির্দেশাবলীর জন্য ধাপ ৩: এপিআই কী সংগ্রহ করুন দেখুন।

টিউটোরিয়ালের এই পর্যায়ে একটি খালি উইন্ডো দেখা যাচ্ছে, যেখানে শুধুমাত্র ফরম্যাটবিহীন লেবেল টেক্সটটি রয়েছে। এর কারণ হলো, আমরা এখনও কোনো জাভাস্ক্রিপ্ট কোড যোগ করিনি।

একটি gmp-map উপাদান তৈরি করুন

একটি ওয়েব পেজে মানচিত্র প্রদর্শনের জন্য, আমাদের এর জন্য একটি জায়গা সংরক্ষণ করতে হবে। সাধারণত, আমরা একটি gmp-map এলিমেন্ট তৈরি করে এবং ব্রাউজারের ডকুমেন্ট অবজেক্ট মডেল (DOM) থেকে এই এলিমেন্টটির একটি রেফারেন্স নিয়ে এটি করে থাকি। আপনি এটি করার জন্য একটি div এলিমেন্টও ব্যবহার করতে পারেন ( আরও জানুন ), তবে gmp-map এলিমেন্ট ব্যবহার করার পরামর্শ দেওয়া হয়।

নিচের কোডটি gmp-map এলিমেন্টকে সংজ্ঞায়িত করে এবং center , zoom , ও map-id প্যারামিটারগুলো সেট করে।

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

center এবং zoom অপশনগুলো সর্বদা আবশ্যক। উপরের কোডে, center প্রপার্টিটি এপিআই-কে বলে দেয় ম্যাপটি কোথায় কেন্দ্র করতে হবে, এবং zoom প্রপার্টিটি ম্যাপের জুম লেভেল নির্দিষ্ট করে। জুম: ০ হলো সর্বনিম্ন জুম, এবং এটি সম্পূর্ণ পৃথিবীকে প্রদর্শন করে। উচ্চতর রেজোলিউশনে পৃথিবীকে জুম ইন করতে জুমের মান বাড়িয়ে দিন।

জুম স্তর

পুরো পৃথিবীর একটি মানচিত্র একটি একক চিত্র হিসাবে উপস্থাপন করতে হলে হয় একটি বিশাল মানচিত্র, অথবা খুব কম রেজোলিউশনের একটি ছোট মানচিত্রের প্রয়োজন হবে। ফলস্বরূপ, গুগল ম্যাপস এবং ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর মধ্যে থাকা মানচিত্রের চিত্রগুলিকে মানচিত্রের 'টাইলস' এবং 'জুম লেভেল'-এ বিভক্ত করা হয়। কম জুম লেভেলে, অল্প সংখ্যক মানচিত্র টাইলস একটি বিস্তৃত এলাকা জুড়ে থাকে; উচ্চতর জুম লেভেলে, টাইলসগুলি উচ্চ রেজোলিউশনের হয় এবং একটি ছোট এলাকা জুড়ে থাকে। নিম্নলিখিত তালিকাটি প্রতিটি জুম লেভেলে আপনি যে আনুমানিক স্তরের বিবরণ দেখতে পাবেন তা দেখায়:

  • ১: বিশ্ব
  • ৫: ভূখণ্ড বা মহাদেশ
  • ১০: শহর
  • ১৫: রাস্তা
  • ২০: ভবন

নিচের তিনটি ছবিতে টোকিওর একই স্থানকে ০, ৭ এবং ১৮ জুম স্তরে দেখানো হয়েছে।

নিচের কোডটি gmp-map এলিমেন্টের সাইজ নির্ধারণকারী CSS বর্ণনা করে।

/* Set the size of the gmp-map element that contains the map */
gmp-map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

উপরের কোডে, style এলিমেন্টটি gmp-map এর সাইজ নির্ধারণ করে। ম্যাপটি দৃশ্যমান হওয়ার জন্য এর প্রস্থ এবং উচ্চতা 0px-এর চেয়ে বেশি সেট করুন। এক্ষেত্রে, ওয়েব পেজের প্রস্থ জুড়ে প্রদর্শিত হওয়ার জন্য gmp-map উচ্চতা 400 পিক্সেল এবং প্রস্থ 100% সেট করা হয়েছে। উচ্চতা এবং প্রস্থের স্টাইল সবসময় স্পষ্টভাবে সেট করার পরামর্শ দেওয়া হয়।

নিয়ন্ত্রণ স্লটিং

আপনি আপনার ম্যাপে HTML ফর্ম কন্ট্রোল যোগ করতে কন্ট্রোল স্লটিং ব্যবহার করতে পারেন। একটি স্লট হলো ম্যাপের একটি পূর্বনির্ধারিত অবস্থান; কোনো এলিমেন্টের জন্য প্রয়োজনীয় অবস্থান নির্ধারণ করতে slot অ্যাট্রিবিউট ব্যবহার করুন এবং gmp-map এলিমেন্টের মধ্যে এলিমেন্ট নেস্ট করুন। নিচের কোড স্নিপেটটিতে ম্যাপের উপরের-বাম কোণায় একটি HTML লেবেল যোগ করার পদ্ধতি দেখানো হয়েছে।