আপনার ওয়েবসাইটে একটি মানচিত্র যোগ করুন (জাভাস্ক্রিপ্ট)

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আপনি ওয়েবের জন্য Google মানচিত্র প্ল্যাটফর্ম ব্যবহার শুরু করার জন্য যা যা প্রয়োজন তা শিখবেন। আপনি মানচিত্র জাভাস্ক্রিপ্ট API লোড করা, আপনার প্রথম মানচিত্র প্রদর্শন করা, মার্কার এবং মার্কার ক্লাস্টারিংয়ের সাথে কাজ করা, মানচিত্রে অঙ্কন করা এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করা থেকে শুরু করে সমস্ত মৌলিক বিষয়গুলি শিখেন।

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

e52623cb8578d625.png

এই কোডল্যাবে, আপনি একটি সাধারণ ওয়েব অ্যাপ তৈরি করেন যা নিম্নলিখিতগুলি করে:

  • মানচিত্র জাভাস্ক্রিপ্ট API লোড করে
  • সিডনি, অস্ট্রেলিয়াকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করে
  • সিডনির জনপ্রিয় আকর্ষণের জন্য কাস্টম মার্কার প্রদর্শন করে
  • মার্কার ক্লাস্টারিং প্রয়োগ করে
  • ব্যবহারকারীর ইন্টারঅ্যাকশন সক্ষম করে যা রিসেন্টার করে এবং যখন একটি মার্কার ক্লিক করা হয় তখন মানচিত্রে একটি বৃত্ত আঁকে

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

  • Google Maps প্ল্যাটফর্ম দিয়ে শুরু করা
  • জাভাস্ক্রিপ্ট কোড থেকে গতিশীলভাবে মানচিত্র জাভাস্ক্রিপ্ট API লোড করা হচ্ছে
  • একটি মানচিত্র লোড হচ্ছে
  • মার্কার, কাস্টম মার্কার এবং মার্কার ক্লাস্টারিং ব্যবহার করা
  • ব্যবহারকারীর মিথস্ক্রিয়া প্রদান করতে মানচিত্র জাভাস্ক্রিপ্ট API ইভেন্ট সিস্টেমের সাথে কাজ করা
  • মানচিত্রটি গতিশীলভাবে নিয়ন্ত্রণ করা
  • মানচিত্রে অঙ্কন

2. পূর্বশর্ত

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

প্রয়োজনীয় Google Maps প্ল্যাটফর্ম পণ্য

এই কোডল্যাবে, আপনি নিম্নলিখিত Google মানচিত্র প্ল্যাটফর্ম পণ্যগুলি ব্যবহার করবেন:

এই কোডল্যাবের জন্য অন্যান্য প্রয়োজনীয়তা

এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন হবে:

  • বিলিং সক্ষম সহ একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট৷
  • Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী
  • জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান
  • আপনার কম্পিউটারে ইনস্টল করা Node.js
  • আপনার পছন্দের একটি পাঠ্য সম্পাদক বা IDE

Google Maps প্ল্যাটফর্ম দিয়ে শুরু করুন

আপনি যদি আগে Google মানচিত্র প্ল্যাটফর্ম ব্যবহার না করে থাকেন তবে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করুন নির্দেশিকা অনুসরণ করুন বা নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করতে Google মানচিত্র প্ল্যাটফর্ম প্লেলিস্টের সাথে শুরু করুন:

  1. একটি বিলিং অ্যাকাউন্ট তৈরি করুন।
  2. একটি প্রকল্প তৈরি করুন।
  3. Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন (আগের বিভাগে তালিকাভুক্ত)৷
  4. একটি API কী তৈরি করুন।

3. সেট আপ করুন

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

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

  1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।

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

Node.js সেটআপ

আপনার যদি এটি ইতিমধ্যে না থাকে, তাহলে আপনার কম্পিউটারে Node.js রানটাইম ডাউনলোড এবং ইনস্টল করতে https://nodejs.org/ এ যান৷

Node.js npm প্যাকেজ ম্যানেজার সহ আসে, যা আপনাকে এই কোডল্যাবের জন্য নির্ভরতা ইনস্টল করতে হবে।

প্রজেক্ট স্টার্টার টেমপ্লেট সেটআপ

আপনি এই কোডল্যাবটি শুরু করার আগে, স্টার্টার প্রজেক্ট টেমপ্লেট, সেইসাথে সম্পূর্ণ সমাধান কোড ডাউনলোড করতে নিম্নলিখিতগুলি করুন:

  1. https://github.com/googlecodelabs/maps-platform-101-js- এ এই কোডল্যাবের জন্য গিটহাব রেপো ডাউনলোড বা ফর্ক করুন।

স্টার্টার প্রকল্পটি /starter ডিরেক্টরিতে অবস্থিত এবং কোডল্যাবটি সম্পূর্ণ করার জন্য আপনার প্রয়োজনীয় মৌলিক ফাইল কাঠামো অন্তর্ভুক্ত করে। আপনার যা কিছুর সাথে কাজ করতে হবে তা /starter/src ডিরেক্টরিতে অবস্থিত। 2. একবার আপনি স্টার্টার প্রজেক্ট ডাউনলোড করলে, /starter ডিরেক্টরিতে npm install চালান। এটি package.json এ তালিকাভুক্ত সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল করে। 3. একবার আপনার নির্ভরতা ইনস্টল হয়ে গেলে, ডিরেক্টরিতে npm start চালান।

ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করার জন্য আপনার জন্য স্টার্টার প্রজেক্ট সেট আপ করা হয়েছে, যা স্থানীয়ভাবে আপনার লেখা কোড কম্পাইল ও রান করে। webpack-dev-server এছাড়াও আপনি কোড পরিবর্তন করার সময় ব্রাউজারে স্বয়ংক্রিয়ভাবে আপনার অ্যাপ পুনরায় লোড করে।

আপনি যদি সম্পূর্ণ সমাধান কোড চলমান দেখতে চান, আপনি /solution ডিরেক্টরিতে উপরের সেটআপ পদক্ষেপগুলি সম্পূর্ণ করতে পারেন।

4. Maps JavaScript API লোড করুন

আপনি শুরু করার আগে, অনুগ্রহ করে নিশ্চিত করুন যে আপনি সেট আপ করার ধাপগুলি অনুসরণ করছেন৷ সব শেষ? ঠিক আছে, Google মানচিত্র প্ল্যাটফর্ম ব্যবহার করে আপনার প্রথম ওয়েব অ্যাপ তৈরি করার সময়!

ওয়েবের জন্য Google মানচিত্র প্ল্যাটফর্ম ব্যবহার করার ভিত্তি হল মানচিত্র জাভাস্ক্রিপ্ট API। এই API Google মানচিত্র প্ল্যাটফর্মের সমস্ত বৈশিষ্ট্য ব্যবহার করার জন্য একটি জাভাস্ক্রিপ্ট ইন্টারফেস প্রদান করে, যার মধ্যে মানচিত্র, মার্কার, অঙ্কন সরঞ্জাম এবং অন্যান্য Google মানচিত্র প্ল্যাটফর্ম পরিষেবা যেমন স্থানগুলি অন্তর্ভুক্ত রয়েছে৷

Maps JavaScript API-এর সাথে আপনার পূর্ব অভিজ্ঞতা থাকলে, আপনি এইভাবে একটি HTML ফাইলে একটি script ট্যাগ সন্নিবেশ করে এটি লোড করার সাথে পরিচিত হতে পারেন:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

এটি এখনও API লোড করার একটি সম্পূর্ণ বৈধ উপায়, তবে আধুনিক জাভাস্ক্রিপ্ট নির্ভরতাগুলি সাধারণত কোড থেকে গতিশীলভাবে অন্তর্ভুক্ত করা হয়। কোড থেকে উপরের script ট্যাগের সমতুল্য সম্পাদন করতে, আপনি @googlemaps/js-api-loader মডিউলটি ব্যবহার করবেন। JS API লোডার ইতিমধ্যেই প্রজেক্টের package.json ফাইলের নির্ভরতার মধ্যে অন্তর্ভুক্ত করা হয়েছে, তাই আপনি যখন npm install আগে চালান তখন এটি ইনস্টল করা হয়েছিল।

JS API লোডার ব্যবহার করতে, নিম্নলিখিতগুলি করুন:

  1. /src/app.js খুলুন। এই ফাইলটি যেখানে আপনি এই কোডল্যাবের জন্য আপনার সমস্ত কাজ করবেন।
  2. @googlemaps/js-api-loader থেকে Loader ক্লাস ইমপোর্ট করুন।

    app.js এর শীর্ষে নিম্নলিখিত যোগ করুন :
     import { Loader } from '@googlemaps/js-api-loader';
  3. একটি apiOptions অবজেক্ট তৈরি করুন।

    Loader ক্লাসের জন্য একটি JSON অবজেক্টের প্রয়োজন যা ম্যাপ জাভাস্ক্রিপ্ট API লোড করার জন্য বিভিন্ন বিকল্প নির্দিষ্ট করে, যার মধ্যে রয়েছে আপনার Google Maps Platform API কী, API-এর কোন সংস্করণটি আপনি লোড করতে চান এবং Maps JS API দ্বারা প্রদত্ত কোনো অতিরিক্ত লাইব্রেরি আপনি লোড করতে চান। . এই কোডল্যাবের উদ্দেশ্যে, আপনাকে শুধুমাত্র app.js এ নিম্নলিখিতগুলি যুক্ত করে API কী নির্দিষ্ট করতে হবে :
     const apiOptions = {
   apiKey: "YOUR API KEY"
 }
  4. Loader একটি উদাহরণ তৈরি করুন এবং এটি আপনার apiOptions পাস করুন।
     const loader = new Loader(apiOptions);
  5. Maps JS API লোড করুন।

    API লোড করতে, Loader ইনস্ট্যান্সে load() কল করুন। JS API লোডার একটি প্রতিশ্রুতি প্রদান করে যা API লোড হয়ে গেলে এবং ব্যবহারের জন্য প্রস্তুত হয়ে গেলে সমাধান করে। API লোড করতে এবং প্রতিশ্রুতি পরিচালনা করতে নিম্নলিখিত স্টাব যোগ করুন:
     loader.load().then(() => {
   console.log('Maps JS API loaded');
 });

সবকিছু সফল হলে আপনার ব্রাউজার কনসোলে console.log বিবৃতিটি দেখতে হবে:

4fa88d1618cc7fd.png

রিক্যাপ করার জন্য, আপনি এখন কোড থেকে ম্যাপ জাভাস্ক্রিপ্ট এপিআই ডায়নামিকভাবে লোড করেছেন এবং ম্যাপ জাভাস্ক্রিপ্ট এপিআই লোডিং সম্পন্ন হলে কলব্যাক ফাংশনটি সংজ্ঞায়িত করেছেন।

আপনার app.js ফাইলটি এইরকম দেখতে হবে:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

এখন যেহেতু Maps JavaScript API লোড হয়েছে, আপনি পরবর্তী ধাপে মানচিত্রটি লোড করবেন।

5. একটি মানচিত্র প্রদর্শন করুন

আপনার প্রথম মানচিত্র প্রদর্শন করার সময়!

Maps JavaScript API-এর সবচেয়ে বেশি ব্যবহৃত অংশ হল google.maps.Map , যেটি এমন একটি শ্রেণী যা আমাদের মানচিত্র দৃষ্টান্তগুলি তৈরি এবং পরিচালনা করতে দেয়৷ displayMap() নামে একটি নতুন ফাংশন তৈরি করে কীভাবে এটি করা হয় তা একবার দেখুন।

  1. আপনার মানচিত্র সেটিংস সংজ্ঞায়িত করুন.

    মানচিত্র জাভাস্ক্রিপ্ট API মানচিত্রের জন্য বিভিন্ন ধরনের বিভিন্ন সেটিংস সমর্থন করে, কিন্তু শুধুমাত্র দুটি প্রয়োজন:
    • center : মানচিত্রের কেন্দ্রের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ সেট করে।
    • zoom : মানচিত্রের প্রাথমিক জুম স্তর সেট করে।
    অস্ট্রেলিয়ার সিডনিতে মানচিত্রটিকে কেন্দ্রীভূত করতে নিম্নলিখিত কোডটি ব্যবহার করুন এবং এটিকে 14-এর একটি জুম স্তর দিন, যা শহরের কেন্দ্র দেখানোর জন্য সঠিক জুম স্তর।
     function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
  2. div পান যেখানে মানচিত্রটি DOM এ ইনজেকশন করা উচিত।

    আপনি মানচিত্রটি প্রদর্শন করার আগে, আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API কে বলতে হবে যেখানে আপনি এটিকে পৃষ্ঠায় প্রদর্শন করতে চান৷ আপনি যদি index.html এ দ্রুত নজর দেন, আপনি দেখতে পাচ্ছেন যে ইতিমধ্যেই একটি div রয়েছে যা এইরকম দেখাচ্ছে:
     <div id="map"></div>
    মানচিত্র জাভাস্ক্রিপ্ট এপিআইকে জানাতে আপনি যেখানে মানচিত্রটি ইনজেকশন করতে চান, সেটি পেতে document.getElementById ব্যবহার করুন DOM রেফারেন্স:
     const mapDiv = document.getElementById('map');
  3. google.maps.Map এর একটি উদাহরণ তৈরি করুন।

    Maps JavaScript API কে একটি নতুন মানচিত্র তৈরি করতে বলার জন্য যা প্রদর্শিত হতে পারে, google.maps.Map এর একটি উদাহরণ তৈরি করুন এবং mapDiv এবং mapOptions এ পাস করুন। আপনি এই ফাংশন থেকে Map ইনস্ট্যান্সও ফেরত দেন যাতে আপনি পরে এটির সাথে আরও কিছু করতে পারেন:
     const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
  4. মানচিত্র প্রদর্শন!

    একবার আপনি আপনার মানচিত্রের উদাহরণ তৈরি করার জন্য সমস্ত যুক্তি সংজ্ঞায়িত করলে, JS API প্রতিশ্রুতি হ্যান্ডলার থেকে displayMap() কল করা বাকি থাকে যাতে মানচিত্র জাভাস্ক্রিপ্ট API লোড হওয়ার সাথে সাথে এটিকে বলা হয়:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });

আপনি এখন আপনার ব্রাউজারে সিডনির একটি সুন্দর মানচিত্র দেখতে পাবেন:

fb0cd6bc38532780.png

রিক্যাপ করতে, এই ধাপে আপনি মানচিত্রের জন্য প্রদর্শন বিকল্পগুলিকে সংজ্ঞায়িত করেছেন, একটি নতুন মানচিত্রের উদাহরণ তৈরি করেছেন এবং এটিকে DOM-এ ইনজেকশন করেছেন৷

আপনার displayMap() ফাংশনটি এইরকম দেখতে হবে:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং (ঐচ্ছিক)

আপনি ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে আপনার মানচিত্রের শৈলী কাস্টমাইজ করতে পারেন৷

একটি মানচিত্র আইডি তৈরি করুন

আপনি যদি এটির সাথে সম্পর্কিত একটি মানচিত্র শৈলী সহ একটি মানচিত্র আইডি তৈরি না করে থাকেন তবে নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করতে মানচিত্র আইডি নির্দেশিকাটি দেখুন:

  1. একটি মানচিত্র আইডি তৈরি করুন।
  2. একটি মানচিত্র শৈলীতে একটি মানচিত্র ID সংযুক্ত করুন৷

আপনার অ্যাপে ম্যাপ আইডি যোগ করা হচ্ছে

আপনার তৈরি করা মানচিত্র আইডি ব্যবহার করতে, app.js ফাইলে displayMap ফাংশনটি পরিবর্তন করুন এবং mapOptions অবজেক্টের mapId বৈশিষ্ট্যে আপনার মানচিত্র ID পাস করুন৷

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

একবার আপনি এটি সম্পূর্ণ করলে, এখন আপনি মানচিত্রে আপনার নির্বাচিত শৈলীটি দেখতে পাবেন!

7. মানচিত্রে চিহ্নিতকারী যোগ করুন

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

590815267846f166.png

এই ধাপে, আপনি ম্যাপে মার্কার google.maps.Marker ব্যবহার করবেন।

  1. আপনার মার্কার অবস্থানের জন্য একটি বস্তু সংজ্ঞায়িত করুন.

    শুরু করতে, একটি নতুন addMarkers() ফাংশন তৈরি করুন, এবং সিডনির জনপ্রিয় পর্যটন আকর্ষণগুলির জন্য নিম্নোক্ত অক্ষাংশ/দ্রাঘিমাংশ বিন্দুর সেট আছে এমন একটি locations অবজেক্ট ঘোষণা করুন৷

    এছাড়াও, মনে রাখবেন যে আপনাকে ফাংশনে আপনার Map উদাহরণটি পাস করতে হবে। আপনি যখন আপনার মার্কার দৃষ্টান্ত তৈরি করবেন তখন আপনি এটি পরে ব্যবহার করবেন।
     function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }
  2. আপনি যে প্রতিটি মার্কার প্রদর্শন করতে চান তার জন্য google.maps.Marker এর একটি উদাহরণ তৈরি করুন৷

    আপনার মার্কারগুলি তৈরি করতে, একটি for...in লুপ ব্যবহার করে locations অবজেক্টের মাধ্যমে পুনরাবৃত্তি করতে নীচের কোডটি ব্যবহার করুন, প্রতিটি মার্কারকে কীভাবে রেন্ডার করা উচিত তার জন্য বিকল্পগুলির একটি সেট তৈরি করুন এবং তারপর প্রতিটির জন্য google.maps.Marker এর একটি উদাহরণ তৈরি করুন অবস্থান

    markerOptions এর icon বৈশিষ্ট্য লক্ষ্য করুন। আগের থেকে ডিফল্ট মানচিত্র পিন মনে আছে? আপনি কি জানেন যে আপনি পিনটিকে আপনার পছন্দসই চিত্র হিসাবে কাস্টমাইজ করতে পারেন? ওয়েল, আপনি পারেন!

    icon প্রপার্টি আপনাকে যে কোনো ইমেজ ফাইলের পাথ প্রদান করতে দেয় যা আপনি কাস্টম মার্কার হিসেবে ব্যবহার করতে চান। আপনি যদি আমাদের প্রকল্প টেমপ্লেট ব্যবহার করে এই কোডল্যাবটি শুরু করেন, তাহলে /src/images images-এ আপনার জন্য ইতিমধ্যেই একটি ছবি অন্তর্ভুক্ত করা হয়েছে।

    এছাড়াও লক্ষ্য করুন যে আপনাকে আপনার মার্কার উদাহরণগুলিকে একটি অ্যারেতে সংরক্ষণ করতে হবে এবং সেগুলিকে ফাংশন থেকে ফিরিয়ে দিতে হবে যাতে সেগুলি পরে ব্যবহার করা যায়।
     const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
  3. মার্কারগুলি প্রদর্শন করুন।

    Maps JavaScript API স্বয়ংক্রিয়ভাবে একটি মার্কার তৈরি করে এবং প্রদর্শন করে যখনই google.maps.Marker এর একটি নতুন দৃষ্টান্ত তৈরি করা হয়, তাই এখন আপনাকে যা করতে হবে তা হল addMarkers() কল করার জন্য আপনার JS API প্রতিশ্রুতি হ্যান্ডলার আপডেট করুন এবং এটিকে আপনার Map উদাহরণ পাস করুন:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });

আপনি এখন মানচিত্রে কাস্টম মার্কার দেখতে হবে:

1e4a55de15215480.png

রিক্যাপ করতে, এই ধাপে আপনি মার্কার অবস্থানের একটি সেট সংজ্ঞায়িত করেছেন এবং প্রতিটি অবস্থানের জন্য একটি কাস্টম মার্কার আইকন সহ google.maps.Marker এর একটি উদাহরণ তৈরি করেছেন৷

আপনার addMarkers() ফাংশন এই মত কিছু দেখতে হবে:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

পরবর্তী ধাপে, আপনি মার্কার ক্লাস্টারিং ব্যবহার করে মার্কারদের ব্যবহারকারীর অভিজ্ঞতা কীভাবে উন্নত করবেন তা দেখবেন।

8. মার্কার ক্লাস্টারিং সক্ষম করুন

একে অপরের কাছাকাছি থাকা অনেকগুলি মার্কার বা মার্কার ব্যবহার করার সময়, আপনি এমন একটি সমস্যার সম্মুখীন হতে পারেন যেখানে মার্কারগুলি ওভারল্যাপ হয় বা একসাথে খুব বেশি ভিড় দেখা যায়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়৷ উদাহরণস্বরূপ, শেষ ধাপে মার্কার তৈরি করার পরে, আপনি এটি লক্ষ্য করেছেন:

6e39736160c6bce4.png

এখানেই মার্কার ক্লাস্টারিং আসে৷ মার্কার ক্লাস্টারিং হল আরেকটি সাধারণভাবে প্রয়োগ করা বৈশিষ্ট্য, যা কাছাকাছি চিহ্নিতকারীকে একটি একক আইকনে গোষ্ঠীভুক্ত করে যা জুম স্তরের উপর নির্ভর করে পরিবর্তিত হয়, যেমন:

4f372caab95d7499.png

মার্কার ক্লাস্টারিংয়ের জন্য অ্যালগরিদম মানচিত্রের দৃশ্যমান এলাকাটিকে একটি গ্রিডে ভাগ করে, তারপর একই কক্ষে থাকা আইকনগুলিকে ক্লাস্টার করে। সৌভাগ্যবশত, আপনাকে এর কোনোটি নিয়ে চিন্তা করতে হবে না কারণ Google Maps প্ল্যাটফর্ম টিম একটি সহায়ক, ওপেন-সোর্স ইউটিলিটি লাইব্রেরি তৈরি করেছে যার নাম MarkerClustererPlus যা আপনার জন্য স্বয়ংক্রিয়ভাবে সবকিছু করে। আপনি MarkerClustererPluson GitHub এর উৎস দেখতে পারেন।

  1. MarkerCluster আমদানি করুন।

    এই কোডল্যাবের টেমপ্লেট প্রজেক্টের জন্য, MarkerClustererPlus ইউটিলিটি লাইব্রেরি ইতিমধ্যেই package.json ফাইলে ঘোষিত নির্ভরতাগুলির মধ্যে অন্তর্ভুক্ত করা হয়েছে, তাই আপনি এই কোডল্যাবের শুরুতে npm npm install চালানোর সময় এটি ইতিমধ্যেই ইনস্টল করেছেন।

    লাইব্রেরি আমদানি করতে, আপনার app.js ফাইলের শীর্ষে নিম্নলিখিত যোগ করুন:
     import MarkerClusterer from '@google/markerclustererplus';
  2. MarkerClusterer এর একটি নতুন উদাহরণ তৈরি করুন।

    মার্কার ক্লাস্টার তৈরি করতে, আপনাকে দুটি জিনিস করতে হবে: আপনার মার্কার ক্লাস্টারগুলির জন্য আপনি যে আইকনগুলি ব্যবহার করতে চান তা প্রদান করুন এবং MarkerClusterer এর একটি নতুন উদাহরণ তৈরি করুন।

    প্রথমে, আপনি যে আইকনগুলি ব্যবহার করতে চান তার পথ নির্দিষ্ট করে এমন একটি বস্তু ঘোষণা করুন। টেমপ্লেট প্রকল্পে, ইতিমধ্যেই ./img/m এ সংরক্ষিত ছবিগুলির একটি সেট রয়েছে। লক্ষ্য করুন চিত্র ফাইলের নামগুলি একই উপসর্গের সাথে ক্রমানুসারে সংখ্যাযুক্ত: m1.png , m2.png , m3.png , এবং আরও অনেক কিছু।

    আপনি যখন মার্কার ক্লাস্টারারের বিকল্পগুলিতে imagePath বৈশিষ্ট্য সেট করেন, তখন আপনি কেবল পাথ এবং ফাইলের উপসর্গ প্রদান করেন এবং মার্কার ক্লাস্টারার স্বয়ংক্রিয়ভাবে সেই উপসর্গ সহ সমস্ত ফাইল ব্যবহার করে এবং শেষে একটি সংখ্যা যুক্ত করে।

    দ্বিতীয়ত, MarkerClusterer এর একটি নতুন দৃষ্টান্ত তৈরি করুন, এবং এটিকে Map উদাহরণে পাস করুন যেখানে আপনি মার্কার ক্লাস্টারগুলি প্রদর্শন করতে চান এবং Marker উদাহরণগুলির একটি অ্যারে যা আপনি ক্লাস্টার করতে চান।
     function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
  3. মার্কার ক্লাস্টারগুলি প্রদর্শন করুন।

    JS API প্রতিশ্রুতি হ্যান্ডলার থেকে clusterMarkers() কল করুন। মার্কার ক্লাস্টারগুলি স্বয়ংক্রিয়ভাবে মানচিত্রে যোগ করা হয় যখন ফাংশন কলে MarkerClusterer উদাহরণ তৈরি করা হয়।
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });

আপনি এখন আপনার মানচিত্রে একটি জোড়া মার্কার ক্লাস্টার দেখতে পাবেন।

e52623cb8578d625.png

লক্ষ্য করুন যে আপনি জুম ইন বা আউট করলে, MarkerClustererPlus স্বয়ংক্রিয়ভাবে আপনার জন্য ক্লাস্টারগুলি পুনঃসংখ্যা এবং আকার পরিবর্তন করে। আপনি জুম ইন করতে এবং সেই ক্লাস্টারে অন্তর্ভুক্ত সমস্ত মার্কার দেখতে যে কোনও মার্কার ক্লাস্টার আইকনে ক্লিক করতে পারেন।

d572fa11aca13eeb.png

রিক্যাপ করার জন্য, এই ধাপে আপনি ওপেন সোর্স MarkerClustererPlus ইউটিলিটি লাইব্রেরি আমদানি করেছেন এবং MarkerClusterer এর একটি উদাহরণ তৈরি করতে এটি ব্যবহার করেছেন যা আগের ধাপে আপনার তৈরি করা মার্কারগুলিকে স্বয়ংক্রিয়ভাবে ক্লাস্টার করে।

আপনার clusterMarkers() ফাংশন এই মত কিছু দেখতে হবে:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

এর পরে, আপনি কীভাবে ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করবেন তা শিখবেন।

9. ব্যবহারকারীর মিথস্ক্রিয়া যোগ করুন

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

Maps JavaScript API একটি বিস্তৃত ইভেন্ট সিস্টেম প্রদান করে যা জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনাকে কোডে বিভিন্ন ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করতে দেয়। উদাহরণস্বরূপ, আপনি ইভেন্ট শ্রোতাদের তৈরি করতে পারেন যাতে ব্যবহারকারীর ম্যাপ এবং মার্কারগুলিতে ক্লিক করা, ম্যাপের ভিউ প্যান করা, জুম ইন এবং আউট করা এবং আরও অনেক কিছুর মত ইন্টারঅ্যাকশনের জন্য কোড এক্সিকিউশন ট্রিগার করা যায়।

এই ধাপে, আপনি আপনার মার্কারগুলিতে একটি ক্লিক শ্রোতা যোগ করবেন, এবং তারপর প্রোগ্রাম্যাটিকভাবে ম্যাপ প্যানটি তৈরি করুন যাতে ব্যবহারকারী ম্যাপের কেন্দ্রে যে মার্কারটি ক্লিক করেছেন সেটি রাখতে।

  1. আপনার মার্কারগুলিতে একটি ক্লিক শ্রোতা সেট করুন।

    ম্যাপ জাভাস্ক্রিপ্ট API-এর সমস্ত বস্তু যা ইভেন্ট সিস্টেমকে সমর্থন করে ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনার জন্য ফাংশনের একটি মানক সেট প্রয়োগ করে, যেমন addListener , removeListener , এবং আরও অনেক কিছু৷

    প্রতিটি মার্কারে একটি ক্লিক ইভেন্ট লিসেনার যোগ করতে, markers অ্যারেটি পুনরাবৃত্তি করুন এবং click ইভেন্টের জন্য একজন শ্রোতাকে সংযুক্ত করতে মার্কার উদাহরণে addListener কল করুন:
     function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
  2. এটি ক্লিক করা হলে একটি মার্কার প্যান করুন.

    click ইভেন্টটি ট্রিগার হয় যখনই একজন ব্যবহারকারী একটি মার্কারে ক্লিক করে বা ট্যাপ করে, এবং ক্লিক করা UI উপাদান সম্পর্কে তথ্য সহ একটি JSON অবজেক্ট হিসাবে একটি ইভেন্ট ফেরত দেয়। মানচিত্রের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, আপনি click ইভেন্টটি পরিচালনা করতে পারেন এবং ক্লিক করা মার্কারটির অক্ষাংশ এবং দ্রাঘিমাংশ পেতে এর LatLng বস্তুটি ব্যবহার করতে পারেন।

    একবার আপনার কাছে এটি হয়ে গেলে, ইভেন্ট হ্যান্ডলারের কলব্যাক ফাংশনে নিম্নলিখিত যোগ করে ম্যাপটিকে মসৃণভাবে প্যান করার জন্য Map ইনস্ট্যান্সের বিল্ট-ইন panTo() ফাংশনে পাস করুন:
     const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
  3. ক্লিক শ্রোতাদের বরাদ্দ করুন।

    JS API প্রতিশ্রুতি হ্যান্ডলার থেকে addPanToMarker() কে কল করুন এবং কোডটি কার্যকর করতে এবং আপনার ক্লিক শ্রোতাদের বরাদ্দ করতে আপনার মানচিত্র এবং মার্কারগুলি পাস করুন।
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

এখন ব্রাউজারে যান এবং আপনার মার্কারগুলিতে ক্লিক করুন। যখন একটি মার্কার ক্লিক করা হয় তখন আপনার মানচিত্রটি স্বয়ংক্রিয়ভাবে রিসেন্টার করার জন্য প্যান হওয়া উচিত।

রিক্যাপ করার জন্য, এই ধাপে, আপনি মানচিত্রের সমস্ত মার্কারের জন্য একটি ক্লিক শ্রোতা বরাদ্দ করতে Maps JavaScript API-এর ইভেন্ট সিস্টেম ব্যবহার করেছেন, ফায়ার করা ক্লিক ইভেন্ট থেকে মার্কারটির অক্ষাংশ এবং দ্রাঘিমাংশ পুনরুদ্ধার করেছেন এবং এটিকে রিসেন্টার করতে ব্যবহার করেছেন। মানচিত্র যখনই একটি মার্কার ক্লিক করা হয়.

আপনার addPanToMarker() ফাংশনটি এইরকম দেখতে হবে:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

আর মাত্র এক ধাপ যেতে! এর পরে, আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর অঙ্কন বৈশিষ্ট্যগুলি ব্যবহার করে মানচিত্রের ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করবেন।

10. মানচিত্রে আঁকুন

এখন পর্যন্ত, আপনি সিডনির একটি মানচিত্র তৈরি করেছেন যা জনপ্রিয় পর্যটন গন্তব্যের জন্য চিহ্নিতকারী দেখায় এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করে। এই কোডল্যাবের শেষ ধাপের জন্য, আপনি আপনার মানচিত্রের অভিজ্ঞতায় একটি অতিরিক্ত দরকারী বৈশিষ্ট্য যোগ করতে মানচিত্র জাভাস্ক্রিপ্ট API-এর অঙ্কন বৈশিষ্ট্যগুলি ব্যবহার করবেন৷

কল্পনা করুন যে এই মানচিত্রটি এমন ব্যবহারকারীদের দ্বারা ব্যবহার করা হবে যারা সিডনি শহরটি অন্বেষণ করতে চায়৷ একটি দরকারী বৈশিষ্ট্য একটি মার্কার চারপাশে একটি ব্যাসার্ধ কল্পনা করা হবে যখন এটি ক্লিক করা হয়. এটি ব্যবহারকারীকে সহজেই বুঝতে সাহায্য করবে যে ক্লিক করা মার্কার থেকে সহজে হাঁটার দূরত্বের মধ্যে অন্য গন্তব্যগুলি কী।

মানচিত্র জাভাস্ক্রিপ্ট এপিআই মানচিত্রে আকৃতি আঁকার জন্য ফাংশনের একটি সেট অন্তর্ভুক্ত করে, যেমন বর্গক্ষেত্র, বহুভুজ, লাইন এবং বৃত্ত। এরপরে, আপনি একটি বৃত্ত রেন্ডার করবেন একটি 800-মিটার (প্রায় অর্ধ-মাইল) ব্যাসার্ধ দেখানোর জন্য যখন এটি ক্লিক করা হয়।

  1. google.maps.Circle দিয়ে একটি বৃত্ত আঁকুন।

    মানচিত্র জাভাস্ক্রিপ্ট API-এ অঙ্কন ফাংশনগুলি আপনাকে মানচিত্রে একটি আঁকা বস্তু কীভাবে প্রদর্শিত হয় তার জন্য বিভিন্ন ধরণের বিকল্প দেয়। একটি বৃত্তাকার ব্যাসার্ধ রেন্ডার করতে, একটি বৃত্তের জন্য বিকল্পগুলির একটি সেট ঘোষণা করুন, যেমন রঙ, স্ট্রোক ওজন, যেখানে বৃত্তটি কেন্দ্রীভূত হওয়া উচিত এবং এর ব্যাসার্ধ, তারপর একটি নতুন বৃত্ত তৈরি করতে google.maps.Circle এর একটি নতুন উদাহরণ তৈরি করুন:
     function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
  2. একটি মার্কার ক্লিক করা হলে বৃত্ত আঁকুন।

    ব্যবহারকারী যখন একটি মার্কারে ক্লিক করেন তখন বৃত্ত আঁকতে, আপনাকে শুধু addPanToMarker() এ ক্লিক লিসেনার কলব্যাক থেকে উপরে লেখা addPanToMarker() drawCircle() ফাংশনটি কল করতে হবে এবং এটিকে মার্কারটির মানচিত্র এবং অবস্থান পাস করতে হবে।

    লক্ষ্য করুন কিভাবে একটি শর্তসাপেক্ষ বিবৃতি যোগ করা হয় যাকে circle.setMap(null) বলা হয়। এটি মানচিত্র থেকে পূর্বে রেন্ডার করা চেনাশোনাটিকে সরিয়ে দেয় যদি ব্যবহারকারী অন্য একটি মার্কারে ক্লিক করে, যাতে আপনার ব্যবহারকারী মানচিত্রটি অন্বেষণ করার সাথে সাথে আপনি চেনাশোনাগুলিতে আচ্ছাদিত একটি মানচিত্রের সাথে শেষ না হন৷

    আপনার addPanToMarker() ফাংশনটি এইরকম দেখতে হবে:
     function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }

সব শেষ! আপনার ব্রাউজারে যান, এবং মার্কারগুলির একটিতে ক্লিক করুন। আপনি এটির চারপাশে রেন্ডার করা একটি বৃত্তাকার ব্যাসার্ধ দেখতে পাবেন:

254baef70c3ab4d5.png

11. অভিনন্দন

আপনি Google মানচিত্র প্ল্যাটফর্ম ব্যবহার করে সফলভাবে আপনার প্রথম ওয়েব অ্যাপ তৈরি করেছেন, যার মধ্যে মানচিত্র জাভাস্ক্রিপ্ট API লোড করা, একটি মানচিত্র লোড করা, মার্কারগুলির সাথে কাজ করা, মানচিত্রে নিয়ন্ত্রণ করা এবং অঙ্কন করা এবং ব্যবহারকারীর মিথস্ক্রিয়া যোগ করা।

সম্পূর্ণ কোডটি দেখতে, /solutions ডিরেক্টরিতে সমাপ্ত প্রকল্পটি দেখুন।

এরপর কি?

এই কোডল্যাবে, আপনি Maps JavaScript API দিয়ে কী করতে পারেন তার মূল বিষয়গুলি কভার করেছেন৷ এর পরে, মানচিত্রে এই বৈশিষ্ট্যগুলির মধ্যে কিছু যোগ করার চেষ্টা করুন:

আপনি ওয়েবে Google মানচিত্র প্ল্যাটফর্মের সাথে কাজ করতে পারেন এমন আরও উপায় শেখা চালিয়ে যেতে, এই লিঙ্কগুলি দেখুন: