Place Autocomplete এবং Routes API দিয়ে একটি রুট প্ল্যানার তৈরি করুন

1. ওভারভিউ

আপনি রোড ট্রিপে যাত্রা করছেন, আপনার প্রতিদিনের যাতায়াতের পরিকল্পনা করছেন, বা একটি ব্যস্ত শহরে নেভিগেট করছেন, পয়েন্ট A থেকে বি পয়েন্টে যাওয়া আপনি কোথায় যেতে চান তা জানার চেয়েও বেশি কিছু। একটি নির্ভরযোগ্য রুট জেনারেশন টুল অপরিহার্য।

Google মানচিত্র প্ল্যাটফর্মের মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনে একটি গতিশীল মানচিত্র যোগ করতে পারেন, ব্যবহারকারীদের দ্রুত স্বয়ংসম্পূর্ণ সহ অবস্থানগুলি ইনপুট করতে এবং মানচিত্রে রুট প্রদর্শন করতে দিন৷

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাব আপনাকে HTML, CSS, JavaScript এবং একটি Node.js ব্যাকএন্ড ব্যবহার করে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে গাইড করবে।

রুট প্ল্যানার ওয়েব অ্যাপ আর্কিটেকচার

রুট প্ল্যানার ওয়েব অ্যাপ

আপনি কি শিখবেন

  • গুগল ম্যাপ প্ল্যাটফর্ম এপিআই কীভাবে সক্ষম করবেন
  • কিভাবে একটি ওয়েব অ্যাপ্লিকেশনে একটি গতিশীল মানচিত্র সংহত করা যায়
  • স্থানগুলি স্বয়ংসম্পূর্ণ পরিষেবাকে কীভাবে সংহত করবেন
  • রুট API এর মাধ্যমে কিভাবে একটি রুট অনুরোধ করতে হয়
  • একটি গতিশীল মানচিত্রে রুট প্রদর্শন কিভাবে
  • কিভাবে একটি ম্যাপ আইডি তৈরি করবেন
  • কিভাবে একটি গতিশীল মানচিত্রে অ্যাডভান্সড মার্কার যোগ করবেন

আপনি কি প্রয়োজন হবে

নমুনা কোড

সম্পূর্ণ সমাধান এবং ধাপে ধাপে কোডটি GitHub- এ উপলব্ধ। কোডে প্রয়োজনীয় নোড প্যাকেজ অন্তর্ভুক্ত নেই। কোডটি কার্যকর করার আগে প্রয়োজনীয় নির্ভরতাগুলি ইনস্টল করুন। প্রয়োজনীয় প্যাকেজের বিশদ বিবরণ package.json ফাইলে পাওয়া যাবে (ধাপ 3 এ ব্যাখ্যা করা হয়েছে)।

2. প্রকল্প সেট আপ করুন এবং এপিআই সক্ষম করুন৷

সক্ষম করার পদক্ষেপের জন্য, আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API , স্থান স্বয়ংসম্পূর্ণ , এবং রুট API সক্ষম করতে হবে।

Google Maps প্ল্যাটফর্ম সেট আপ করুন

আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷

  1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন। প্রকল্প নির্বাচন করুন
  2. মানচিত্র API লাইব্রেরি পৃষ্ঠায় এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম APIগুলি সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
  3. ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷

3. একটি Node.js প্রকল্প সেট আপ করুন

এই ল্যাবে, আমরা ওয়েব থেকে উত্স এবং গন্তব্য সংগ্রহ করতে Node.js ব্যবহার করব এবং রুট API-এর মাধ্যমে রুটের অনুরোধ করব৷

ধরে নিচ্ছি আপনি ইতিমধ্যেই Node.js ইনস্টল করেছেন, একটি ডিরেক্টরি তৈরি করুন যা আপনি এই প্রকল্পটি চালানোর জন্য ব্যবহার করবেন:

$ mkdir ac_routes
$ cd ac_routes

আপনার অ্যাপ্লিকেশনের জন্য ডিরেক্টরিতে একটি নতুন Node.js প্যাকেজ শুরু করুন:

$ npm init

এই কমান্ডটি আপনাকে অনেক কিছুর জন্য অনুরোধ করে, যেমন আপনার অ্যাপ্লিকেশনের নাম এবং সংস্করণ। আপাতত, আপনি তাদের বেশিরভাগের জন্য ডিফল্ট গ্রহণ করতে রিটার্ন চাপতে পারেন। ডিফল্ট এন্ট্রি পয়েন্ট হল index.js, আপনি এটিকে আপনার প্রধান ফাইলে পরিবর্তন করতে পারেন। এই ল্যাবে, মূল ফাইলটি হল function/server.js (6 ধাপে আরও বিস্তারিত)।

উপরন্তু, আপনার পছন্দের ফ্রেমওয়ার্ক এবং মডিউল ইনস্টল করতে দ্বিধা বোধ করুন। এই ল্যাবটি ওয়েব ফ্রেমওয়ার্ক ( এক্সপ্রেস ) এবং বডি পার্সার ( বডি-পার্সার ) ব্যবহার করে। package.json ফাইলে আরও বিশদ খুঁজুন।

4. একটি গতিশীল মানচিত্র তৈরি করুন

এখন যেহেতু আমাদের Node.js ব্যাকএন্ড আছে, আসুন ক্লায়েন্ট সাইডের জন্য প্রয়োজনীয় পদক্ষেপগুলি অন্বেষণ করি।

  • অ্যাপ্লিকেশনের জন্য একটি HTML পৃষ্ঠা তৈরি করুন
  • স্টাইলিং জন্য একটি CSS ফাইল তৈরি করুন
  • HTML পৃষ্ঠায় Google Maps JavaScript API লোড করুন
  • আপনার অ্যাপ্লিকেশন প্রমাণীকরণ করতে স্ক্রিপ্ট ট্যাগে আপনার API কী পেস্ট করুন
  • অ্যাপ্লিকেশন কার্যকারিতা পরিচালনা করতে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন

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

  1. আপনার প্রকল্প ফোল্ডারে একটি নতুন ডিরেক্টরি তৈরি করুন (এই ক্ষেত্রে ac_routes) 
     $ mkdir public
 $ cd public
  2. সর্বজনীন ডিরেক্টরিতে, index.html তৈরি করুন
  3. নিচের কোডটি index.html এ কপি করুন 
     <!DOCTYPE html>
 <html>
 <head>
   <title>GMP Autocomplete + Routes</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <div class="container">
     <!-- Start of the container for map -->
     <div class="main">
       <div id="map"></div>
     </div>
     <!-- End of the container for map -->
   </div>
   </body>
 </html>

একটি CSS ফাইল তৈরি করুন

  1. পাবলিক ডিরেক্টরিতে style.css তৈরি করুন
  2. নিচের কোডটি style.css-এ কপি করুন: 
     html, body {height: 100%;}
 body {
   background: #fff;
   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size:16px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
 }
 .container {display:flex; width:90%; padding:100px 0; margin:0 auto;}
 .main {width:70%; height:800px;}
  #map {height:100%; border-radius:20px;}

মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন

এই ল্যাবে, আমরা মানচিত্র জাভাস্ক্রিপ্ট API লোড করতে ডায়নামিক লাইব্রেরি আমদানি ব্যবহার করব। এখানে আরো বিস্তারিত খুঁজুন.

index.html এ, ক্লোজিং বডি ট্যাগের আগে নিম্নলিখিত কোডটি কপি করুন। আপনার নিজস্ব 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"});</script>

একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন

  1. সর্বজনীন ডিরেক্টরিতে, app.js তৈরি করুন
  2. নিচের কোডটি app.js-এ কপি করুন 
     (function(){
   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,
           mapId: 'DEMO_MAP_ID'
       });
   }

   initMap();
 }());

DEMO_MAP_ID হল একটি ID যা কোড নমুনাগুলির জন্য ব্যবহার করা যেতে পারে যার জন্য একটি মানচিত্র ID প্রয়োজন৷ এই আইডিটি প্রোডাকশন অ্যাপ্লিকেশনে ব্যবহারের উদ্দেশ্যে নয় এবং ক্লাউড স্টাইলিং প্রয়োজন এমন বৈশিষ্ট্যগুলির জন্য ব্যবহার করা যাবে না৷ এই ল্যাবে, পরবর্তী পর্যায়ে আমাদের উন্নত মার্কারগুলির জন্য একটি মানচিত্র ID প্রয়োজন৷ আপনার অ্যাপ্লিকেশনের জন্য একটি মানচিত্র আইডি তৈরি করার বিষয়ে আরও বিশদ খুঁজুন।

index.html-এ, ক্লোজিং বডি ট্যাগের আগে এবং ম্যাপ জাভাস্ক্রিপ্ট API লোড করার স্ক্রিপ্ট ট্যাগের পরে app.js লিঙ্ক করুন।

<script type="text/JavaScript" src="app.js"></script>

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত সম্পূর্ণ কোড GitHub:step1_createDynamicMap- এ উপলব্ধ

5. উৎস এবং গন্তব্যের জন্য ইনপুট ঠিকানা

  • উত্স এবং গন্তব্য ইনপুটের জন্য index.html এ দুটি পাঠ্য ক্ষেত্র যুক্ত করুন৷
  • স্বয়ংসম্পূর্ণ লাইব্রেরি আমদানি করুন
  • মূল এবং গন্তব্য পাঠ্য ক্ষেত্রে স্বয়ংসম্পূর্ণ পরিষেবা আবদ্ধ করুন

পাঠ্য ক্ষেত্র যোগ করুন

index.html-এ, container ক্লাস সহ div এর প্রথম সন্তান হিসাবে নিম্নলিখিত কোড যোগ করুন।

<div class="aside">
  <div class="inputgroup">
    <label for="origin">Start</label>
    <input type="text" id="origin" name="origin" class="input-location" placeholder="Enter an address">
  </div>
  <div class="inputgroup">
    <label for="origin">End</label>
    <input type="text" id="destination" name="destination" class="input-location" placeholder="Enter an address">
  </div>
</div>

আমদানি করুন এবং স্বয়ংসম্পূর্ণ সক্ষম করুন৷

google.maps.places.Autocomplete ক্লাস একটি উইজেট যা ব্যবহারকারীর পাঠ্য ইনপুটের উপর ভিত্তি করে স্থানের পূর্বাভাস প্রদান করে। এটি টাইপ পাঠ্যের একটি ইনপুট উপাদানের সাথে সংযুক্ত করে এবং সেই ক্ষেত্রে পাঠ্য এন্ট্রির জন্য শোনে। ভবিষ্যদ্বাণীগুলির তালিকা একটি ড্রপ-ডাউন তালিকা হিসাবে উপস্থাপন করা হয়, এবং পাঠ্য প্রবেশের সাথে সাথে আপডেট করা হয়।

app.js-এ, মানচিত্র আরম্ভ করার পরে নিম্নলিখিত কোড যোগ করুন: 

let placeIds = [];
async function initPlace() {
  const { Autocomplete } = await google.maps.importLibrary('places');
  let autocomplete = [];
  let locationFields = Array.from(document.getElementsByClassName('input-location'));
  //Enable autocomplete for input fields
  locationFields.forEach((elem,i) => {
      autocomplete[i] = new Autocomplete(elem);
      google.maps.event.addListener(autocomplete[i],"place_changed", () => {
          let place = autocomplete[i].getPlace();
          if(Object.keys(place).length > 0){
              if (place.place_id){
                  placeIds[i] = place.place_id; //We use Place Id in this example
              } else {
                  placeIds.splice(i,1); //If no place is selected or no place is found, remove the previous value from the placeIds.
                  window.alert(`No details available for input: ${place.name}`);
                  return;
              }
          }
      });
  });
}
initPlace();

একবার একজন ব্যবহারকারী স্বয়ংসম্পূর্ণ পূর্বাভাস তালিকা থেকে একটি স্থান নির্বাচন করলে, একটি স্থানের ফলাফলের বিশদ বিবরণ getPlace() পদ্ধতি ব্যবহার করে পুনরুদ্ধার করা যেতে পারে। স্থানের ফলাফলে একটি স্থান সম্পর্কে অনেক তথ্য রয়েছে। এই ল্যাবে, আমরা নির্বাচিত স্থান সনাক্ত করতে place_id ব্যবহার করতে যাচ্ছি। প্লেস আইডিগুলি অনন্যভাবে Google Places ডাটাবেসে এবং Google মানচিত্রে একটি স্থান চিহ্নিত করে৷ স্থান আইডি সম্পর্কে আরও বিশদ খুঁজুন।

প্রাসঙ্গিক শৈলী যোগ করুন

style.css এ, নিম্নলিখিত কোড যোগ করুন: 

.aside {width:30%; padding:20px;}
.inputgroup {margin-bottom:30px;}
.aside label {display:block; padding:0 10px; margin-bottom:10px; font-size:18px; color:#666565;}
.aside input[type=text] {width:90%;padding:10px; font-size:16px; border:1px solid #e6e8e6; border-radius:10px;}

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত সম্পূর্ণ কোড GitHub:step2_inputAddress- এ উপলব্ধ

6. রুট অনুরোধ করুন

  • রুট অনুরোধ শুরু করতে index.html-এ একটি 'রুট পান' বোতাম যোগ করুন
  • এই বোতামটি Node.js পরিষেবাতে উত্স এবং গন্তব্য ডেটা পাঠানোর ট্রিগার করে৷
  • Node.js পরিষেবা রুট API-কে একটি অনুরোধ পাঠায়
  • API প্রতিক্রিয়া প্রদর্শনের জন্য ক্লায়েন্ট সাইডে ফেরত দেওয়া হয়

উত্স এবং গন্তব্য সেট এবং একটি গতিশীল মানচিত্র প্রস্তুত সহ রুটটি পাওয়ার সময়। রুট এপিআই , পরবর্তী প্রজন্ম, দিকনির্দেশের পারফরম্যান্স অপ্টিমাইজ করা সংস্করণ এবং দূরত্ব ম্যাট্রিক্স পরিষেবা উদ্ধারে আসে। এই ল্যাবে, আমরা ওয়েব থেকে উত্স এবং গন্তব্য সংগ্রহ করতে Node.js ব্যবহার করব এবং রুট API-এর মাধ্যমে রুটের অনুরোধ করব৷

index.html-এ, div aside ক্লোজিং ট্যাগের আগে 'Get a route' বাটন যোগ করুন 

<div class="inputgroup">
  <button id="btn-getroute">Get a route</button>
</div>

style.css এ, নিম্নলিখিত লাইন যোগ করুন: 

.aside button {padding:20px 30px; font-size:16px; border:none; border-radius:50px; background-color:#1a73e8; color:#fff;}

app.js-এ, Node.js পরিষেবাতে উত্স এবং গন্তব্য ডেটা পাঠাতে নীচের কোডটি যোগ করুন: 

function requestRoute(){
  let btn = document.getElementById('btn-getroute');
  btn.addEventListener('click', () => {
    //In this example, we will extract the Place IDs from the Autocomplete response
    //and use the Place ID for origin and destination
    if(placeIds.length == 2){
        let reqBody = {
            "origin": {
                "placeId": placeIds[0]
            },
            "destination": {
                "placeId": placeIds[1]
            }
        }

        fetch("/request-route", {
            method: 'POST',
            body: JSON.stringify(reqBody),
            headers: {
                "Content-Type": "application/json"
            }
        }).then((response) => {
            return response.json();
        }).then((data) => {
            //Draw the route on the map
            //Details will be covered in next step
            renderRoutes(data);
        }).catch((error) => {
            console.log(error);
        });
    } else {
        window.alert('Location must be set');
        return;
    }
  });
}

requestRoute();

renderRoutes() হল একটি ফাংশন যা আমরা মানচিত্রে রুট আঁকতে ব্যবহার করব। আমরা পরবর্তী ধাপে বিস্তারিত কভার করব।

সার্ভার তৈরি করা হচ্ছে

প্রকল্প ডিরেক্টরিতে (এই ক্ষেত্রে ac_routes), ফাংশন নামে একটি নতুন ফোল্ডার তৈরি করুন। এই ফোল্ডারের ভিতরে, server.js নামে একটি ফাইল তৈরি করুন। ফাইলটি আপনার প্রোজেক্টের এন্ট্রি পয়েন্ট হিসেবে কাজ করে যা আপনার Node.js প্রোজেক্ট সেট আপ করার সময় কনফিগার করা হয়, তিনটি মূল ফাংশন পরিচালনা করে:

  1. ওয়েব ক্লায়েন্ট থেকে ডেটা সংগ্রহ করা
  2. রুট API এ অনুরোধ পাঠানো হচ্ছে
  3. ক্লায়েন্ট সাইডে API প্রতিক্রিয়া ফেরত দেওয়া

নিম্নলিখিত কোডটি server.js-এ কপি করুন। আপনার নিজস্ব API কী দিয়ে 'YOUR_API_KEY' প্রতিস্থাপন করুন। API কী নিরাপত্তা বাড়াতে, আমরা ব্যাকএন্ডের জন্য একটি ডিসটেন্স কী ব্যবহার করার পরামর্শ দৃঢ়ভাবে। নিরাপত্তা নির্দেশিকা দেখুন। 

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

const port  = 8080;
const urlencodedParser = bodyParser.urlencoded({extended:true}); 

function main() {
  app.use('/', express.static('public'));
  app.use(urlencodedParser);
  app.use(express.json());

  app.post('/request-route', (req,res) => {    
    fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Goog-Api-Key": "YOUR_API_KEY",
        "X-Goog-FieldMask": "*"
      },
      body: JSON.stringify(req.body)
    }).then((response) => {
      return response.json();
    }).then((data) => {
      if('error' in data){
        console.log(data.error);
      } else if(!data.hasOwnProperty("routes")){
        console.log("No route round");
      } else {
        res.end(JSON.stringify(data));
      }
    }).catch((error) => {
      console.log(error)
    });
  });

  app.listen(port, () => {
      console.log('App listening on port ${port}: ' + port);
      console.log('Press Ctrl+C to quit.');
  });
}

main();

রুট API এর সাথে একটি রুট পাওয়ার বিষয়ে আরও রুট API বিশদ খুঁজুন।

কোড চালান

কমান্ড লাইনে নীচের কোডটি চালান: 

$ node function/server.js

ব্রাউজার খুলুন এবং http://127.0.0.1:8080/index.html দেখুন। আপনি আবেদন পৃষ্ঠা দেখতে হবে. এই পর্যায়ে, API প্রতিক্রিয়া ওয়েব ক্লায়েন্টে ফেরত দেওয়া হয়। আসুন পরবর্তী ধাপে মানচিত্রের রুটটি কীভাবে প্রদর্শন করবেন তা দেখা যাক।

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত সম্পূর্ণ কোড GitHub:step3_requestRoute- এ উপলব্ধ

7. মানচিত্রে রুট প্রদর্শন করুন

পূর্ববর্তী ধাপে, যখন আমরা Node.js পরিষেবা থেকে সফলভাবে প্রতিক্রিয়া পাই তখন আমরা renderRoutes() উল্লেখ করি। এখন ম্যাপে রুট প্রদর্শনের জন্য আসল কোড যোগ করা যাক।

app.js-এ, নিচের কোড যোগ করুন: 

let paths = [];
async function renderRoutes(data) {
  const { encoding } = await google.maps.importLibrary("geometry");
  let routes = data.routes;
  let decodedPaths = [];

  ///Display routes and markers
  routes.forEach((route,i) => {
      if(route.hasOwnProperty('polyline')){
        //Decode the encoded polyline
        decodedPaths.push(encoding.decodePath(route.polyline.encodedPolyline));

        //Draw polyline on the map
        for(let i = decodedPaths.length - 1; i >= 0; i--){
            let polyline = new google.maps.Polyline({
                map: map,
                path: decodedPaths[i],
                strokeColor: "#4285f4",
                strokeOpacity: 1,
                strokeWeight: 5
            });
            paths.push(polyline);
        }
        
        //Add markers for origin/destination
        addMarker(route.legs[0].startLocation.latLng,"A");
        addMarker(route.legs[0].endLocation.latLng,"B");
        //Set the viewport
        setViewport(route.viewport);
      } else {
        console.log("Route cannot be found");
      }
  });
}

রুট এপিআই পলিলাইন প্রদান করে এনকোডেড পলিলাইন (ডিফল্ট) অথবা জিওজেসনলাইনস্ট্রিং-এর বিন্যাসে। এই ল্যাবে, আমরা এনকোডেড পলিলাইন ফর্ম্যাট ব্যবহার করি এবং মানচিত্র জাভাস্ক্রিপ্ট জ্যামিতি লাইব্রেরি ব্যবহার করে এটিকে ডিকোড করি ।

উৎপত্তি এবং গন্তব্যের জন্য উন্নত মার্কার যোগ করতে আমরা addMarker() ব্যবহার করব। app.js-এ, নিম্নলিখিত কোড যোগ করুন: 

let markers = [];
async function addMarker(pos,label){
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { PinElement } = await google.maps.importLibrary("marker");
  const { LatLng } = await google.maps.importLibrary("core");
  let pinGlyph = new PinElement({
      glyphColor: "#fff",
      glyph: label
  });
  let marker = new AdvancedMarkerElement({
      position: new LatLng({lat:pos.latitude,lng:pos.longitude}),
      gmpDraggable: false,
      content: pinGlyph.element,
      map: map
  });
  markers.push(marker);
}

এখানে আমরা দুটি উন্নত মার্কার তৈরি করি - মূলের জন্য A এবং গন্তব্যের জন্য B। উন্নত মার্কার সম্পর্কে আরও বিশদ খুঁজুন।

এর পরে, আমরা রুট এপিআই দ্বারা প্রদত্ত সুবিধাজনক ভিউপোর্ট তথ্য ব্যবহার করে পুনরুদ্ধার করা রুটে মানচিত্র ভিউপোর্টকে কেন্দ্রীভূত করব। app.js-এ, নিম্নলিখিত কোড যোগ করুন: 

async function setViewport(viewPort) {
  const { LatLng } = await google.maps.importLibrary("core");
  const { LatLngBounds } = await google.maps.importLibrary("core");
  let sw = new LatLng({lat:viewPort.low.latitude,lng:viewPort.low.longitude});
  let ne = new LatLng({lat:viewPort.high.latitude,lng:viewPort.high.longitude});
  map.fitBounds(new LatLngBounds(sw,ne));
}

সম্পূর্ণ নমুনা কোড এই বিন্দু পর্যন্ত সম্পূর্ণ কোড GitHub:step4_displayRoute এ উপলব্ধ

8. মানচিত্র থেকে উপাদান সরান

এখানে আমরা আরও এক ধাপ এগিয়ে যেতে চাই। বিশৃঙ্খলা এড়াতে নতুন মার্কার এবং রুট আঁকার আগে মানচিত্রটি পরিষ্কার করা যাক।

app.js-এ, আরও একটি ফাংশন যোগ করা যাক: 

function clearUIElem(obj,type) {
  if(obj.length > 0){
      if(type == 'advMarker'){
          obj.forEach(function(item){
              item.map = null;
          });
      } else {
          obj.forEach(function(item){
              item.setMap(null);
          });
      }
  }
}

renderRoutes() এর শুরুতে নিম্নলিখিত লাইন যোগ করুন: 

clearUIElem(paths,'polyline');

addMarker() এর শুরুতে নিম্নলিখিত লাইন যোগ করুন: 

clearUIElem(markers,'advMarker');

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত সম্পূর্ণ কোড GitHub:step5_removeElements- এ উপলব্ধ

9. অভিনন্দন

আপনি সফলভাবে জিনিস তৈরি করেছেন.

আপনি যা শিখেছেন

  • Google মানচিত্র প্ল্যাটফর্ম API সক্ষম করুন৷
  • HTML পৃষ্ঠায় Google Maps JavaScript API লোড করুন
  • স্থান লাইব্রেরি, মানচিত্র জাভাস্ক্রিপ্ট API আমদানি করুন
  • টেক্সট ফিল্ডে স্থান স্বয়ংসম্পূর্ণ পরিষেবা আবদ্ধ করুন
  • রুট API এর মাধ্যমে একটি রুট অনুরোধ করুন
  • একটি গতিশীল মানচিত্রে রুট প্রদর্শন করুন
  • একটি মানচিত্র আইডি তৈরি করুন
  • উন্নত মার্কার তৈরি করুন

আরও জানুন

আপনি অন্য কোন কোডল্যাব দেখতে চান?

মানচিত্রে ডেটা ভিজ্যুয়ালাইজেশন আমার মানচিত্রের শৈলী কাস্টমাইজ করার বিষয়ে আরও মানচিত্রে 3D মিথস্ক্রিয়া জন্য বিল্ডিং

আপনি যে কোডল্যাব চান তা কি উপরে তালিকাভুক্ত নয়? এখানে একটি নতুন সমস্যা সহ এটি অনুরোধ করুন ।