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

ভূমিকা

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

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

শুরু করা

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

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

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

ধাপ ১: একটি API কী পান

এই বিভাগটি ব্যাখ্যা করে যে কীভাবে আপনার নিজস্ব API কী ব্যবহার করে আপনার অ্যাপটিকে Maps JavaScript API-তে প্রমাণীকরণ করবেন।

একটি API কী পেতে এই পদক্ষেপগুলি অনুসরণ করুন:

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

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

  3. API এবং যেকোনো সম্পর্কিত পরিষেবা সক্রিয় করতে Continue-এ ক্লিক করুন।

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

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

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

  7. একবার আপনার কাছে একটি API কী হয়ে গেলে, "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 হিসেবে ঘোষণা করা হয়েছে।
  • বুটস্ট্র্যাপ লোডার ব্যবহার করে Maps JavaScript API লোড করা হয়েছে।
  • মানচিত্রটি ধরে রাখার জন্য একটি gmp-map উপাদান তৈরি করা হয়েছে।

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

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

<!DOCTYPE html>

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

মনে রাখবেন যে কিছু CSS যা quirks মোডে কাজ করে তা স্ট্যান্ডার্ড মোডে বৈধ নয়। বিশেষ করে, সমস্ত শতাংশ-ভিত্তিক আকার অবশ্যই প্যারেন্ট ব্লক উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হতে হবে, এবং যদি সেই পূর্বসূরীদের মধ্যে কেউ একটি আকার নির্দিষ্ট করতে ব্যর্থ হয়, তাহলে ধরে নেওয়া হয় যে সেগুলি 0 x 0 পিক্সেল আকারের। সেই কারণে, আমরা নিম্নলিখিত 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>

আপনার নিজস্ব API কী কীভাবে পেতে হবে তার নির্দেশাবলীর জন্য ধাপ ৩ দেখুন: একটি API কী পান ।

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

একটি 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 প্রপার্টি API কে ম্যাপটি কোথায় সেন্টার করতে হবে তা বলে দেয় এবং zoom প্রপার্টি ম্যাপের জুম লেভেল নির্দিষ্ট করে। জুম: 0 হল সর্বনিম্ন জুম, এবং সমগ্র পৃথিবী প্রদর্শন করে। উচ্চ রেজোলিউশনে পৃথিবীতে জুম ইন করতে জুম মান বেশি সেট করুন।

জুম লেভেল

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

  • ১: বিশ্ব
  • ৫: স্থলভাগ বা মহাদেশ
  • ১০: শহর
  • ১৫: রাস্তাঘাট
  • ২০: ভবন

নিম্নলিখিত তিনটি চিত্র ০, ৭ এবং ১৮ জুম স্তরে টোকিওর একই অবস্থান প্রতিফলিত করে।

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