প্লেসেস UI কিট প্রবর্তন : একটি রেডি টু ইউজ, কম খরচের কম্পোনেন্ট লাইব্রেরি যা আপনাকে আপনার পছন্দের যেকোন ম্যাপে প্লেসের জন্য পরিচিত Google Maps UI আনতে দেয়। এটি ব্যবহার করে দেখুন, এবং GMP এর ভবিষ্যত গঠনে সাহায্য করতে আপনার ইনপুট শেয়ার করুন!

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি প্রতিক্রিয়া অ্যাপে একটি Google মানচিত্র যোগ করুন

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

এই কোডল্যাবে, আপনি Google Maps JavaScript API-এর জন্য vis.gl/react-google-map লাইব্রেরি দিয়ে শুরু করতে যা যা প্রয়োজন তা শিখতে পারেন, যা আপনাকে একটি প্রতিক্রিয়া অ্যাপে একটি Google মানচিত্র যোগ করতে দেয়। আপনি কীভাবে সেট আপ করবেন, মানচিত্র জাভাস্ক্রিপ্ট API লোড করবেন, আপনার প্রথম মানচিত্র প্রদর্শন করবেন, মার্কার এবং মার্কার ক্লাস্টারিংয়ের সাথে কাজ করবেন, মানচিত্রে আঁকবেন এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করবেন তা শিখবেন।

দ্রষ্টব্য: vis.gl/react-google-map Google মানচিত্র প্ল্যাটফর্ম পরিষেবাগুলি ব্যবহার করে৷ এই লাইব্রেরির মাধ্যমে Google মানচিত্র প্ল্যাটফর্ম পরিষেবাগুলির ব্যবহার Google মানচিত্র প্ল্যাটফর্ম পরিষেবার শর্তাবলীর অধীন৷

vis.gl/react-google-map একটি Google মানচিত্র প্ল্যাটফর্ম মূল পরিষেবা নয়৷ অতএব, Google মানচিত্র প্ল্যাটফর্ম পরিষেবার শর্তাবলী (যেমন, প্রযুক্তিগত সহায়তা পরিষেবা, পরিষেবা স্তরের চুক্তি, এবং অবচয় নীতি) এই লাইব্রেরিতে প্রযোজ্য নয়৷

আপনি vis.gl/react-google-map README-এ সহায়তা বিকল্পগুলি সম্পর্কে আরও পড়তে পারেন৷

পূর্বশর্ত

জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান

আপনি কি শিখুন

Google Maps প্ল্যাটফর্মের জন্য vis.gl/react-google-map লাইব্রেরি দিয়ে কীভাবে শুরু করবেন।
কিভাবে মানচিত্র জাভাস্ক্রিপ্ট API ঘোষণামূলকভাবে লোড করবেন।
একটি প্রতিক্রিয়া অ্যাপে একটি মানচিত্র কীভাবে লোড করবেন।
মার্কার, কাস্টম মার্কার এবং মার্কার ক্লাস্টারিং কীভাবে ব্যবহার করবেন।
ব্যবহারকারীর ইন্টারঅ্যাকশন প্রদান করতে ম্যাপ জাভাস্ক্রিপ্ট এপিআই ইভেন্ট সিস্টেমের সাথে কিভাবে কাজ করবেন।
গতিশীলভাবে মানচিত্র নিয়ন্ত্রণ কিভাবে.
কিভাবে মানচিত্রে আঁকতে হয়।

আপনার যা প্রয়োজন

বিলিং সক্ষম সহ একটি Google ক্লাউড অ্যাকাউন্ট৷
Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী।
আপনার কম্পিউটারে ইনস্টল করা Node.js.
আপনার পছন্দের একটি পাঠ্য সম্পাদক বা IDE।
Google Maps JavaScript API-এর জন্য vis.gl/react-google-map লাইব্রেরি।
googlemaps/markerclusterer লাইব্রেরি

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

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

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

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

2. সেট আপ করুন

স্টার্টার প্রকল্প ডাউনলোড করুন

স্টার্টার প্রকল্প টেমপ্লেট এবং সমাধান কোড ডাউনলোড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

গিটহাব রিপোজিটরি ডাউনলোড বা ফর্ক করুন। স্টার্টার প্রজেক্টটি /starter ডিরেক্টরিতে অবস্থিত এবং কোডল্যাবটি সম্পূর্ণ করতে আপনার প্রয়োজনীয় মৌলিক ফাইল কাঠামো অন্তর্ভুক্ত করে। আপনি আপনার সমস্ত কাজ /starter/src ডিরেক্টরিতে করেন।

git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

বিকল্পভাবে, সোর্স কোড ডাউনলোড করতে এই বোতামটি ক্লিক করুন।

/starter ডিরেক্টরিতে নেভিগেট করুন এবং npm ইনস্টল করুন। এটি package.json ফাইলে তালিকাভুক্ত সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল করে।

cd starter && npm install

এখনও /starter ডিরেক্টরিতে থাকা অবস্থায়:

npm start

আপনার জন্য Vite ডেভেলপমেন্ট সার্ভার ব্যবহার করার জন্য স্টার্টার প্রজেক্ট সেট আপ করা হয়েছে, যা আপনি স্থানীয়ভাবে যে কোডটি লেখেন তা সংকলন করে এবং চালায়। Vite ডেভেলপমেন্ট সার্ভারও আপনি যে কোনো সময় কোড পরিবর্তন করলে ব্রাউজারে আপনার অ্যাপটি স্বয়ংক্রিয়ভাবে পুনরায় লোড করে। আপনি যদি বিল্ড প্রক্রিয়ার শেষে প্রদত্ত লিঙ্কটি অনুসরণ করেন তবে আপনাকে একটি ওয়েব পৃষ্ঠা খুঁজে পাওয়া উচিত যেখানে লেখা আছে: "হ্যালো, বিশ্ব!"

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

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

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

React ফ্রেমওয়ার্ক সহ Maps JavaScript API লোড করতে, আপনাকে APIProvider উপাদানটি ব্যবহার করতে হবে যা vis.gl/react-google-map লাইব্রেরির অংশ। এই উপাদানটি অ্যাপের যেকোনো স্তরে যোগ করা যেতে পারে, সাধারণত শীর্ষে কোথাও, এবং এটি সমস্ত শিশু উপাদানকে অপরিবর্তিত রেন্ডার করে। মানচিত্র জাভাস্ক্রিপ্ট API-এর লোডিং পরিচালনা করার পাশাপাশি, এটি এই লাইব্রেরির অন্যান্য উপাদান এবং হুকগুলির জন্য প্রসঙ্গ তথ্য এবং ফাংশন সরবরাহ করে। APIProvider vis.gl/react-google-map লাইব্রেরিতে অন্তর্ভুক্ত করা হয়েছে, তাই আপনি যখন npm install আগে চালান তখন এটি ইনস্টল করা হয়েছিল।

APIProvider উপাদান ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

/src/app.tsx ফাইলটি খুলুন। এই ফাইলটি যেখানে আপনি এই কোডল্যাবের জন্য আপনার সমস্ত কাজ করেন।
ফাইলের শীর্ষে, @ vis.gl/react-google-maps লাইব্রেরি থেকে APIProvider ক্লাস ইম্পোর্ট করুন:

import {APIProvider} from '@vis.gl/react-google-maps';

App ফাংশনের সংজ্ঞায়, পূর্ববর্তী ধাপে তৈরি API কী এবং কনসোল লগ বার্তা সহ onLoad বৈশিষ্ট্যের সাথে APIProvider উপাদানের apiKey প্যারামিটার সেট করুন:

<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

APIProvider উপাদানটি বৈশিষ্ট্যের একটি সিরিজ নেয় যা Maps JavaScript API লোড করার জন্য বিভিন্ন বিকল্প নির্দিষ্ট করে, যার মধ্যে রয়েছে আপনার Google Maps Platform API কী, API এর কোন সংস্করণটি আপনি লোড করতে চান এবং Maps JavaScript API দ্বারা প্রদত্ত অতিরিক্ত লাইব্রেরি যা আপনি লোড করতে চান।

Google মানচিত্র API কীটি APIProvider কাজ করার জন্য একমাত্র প্রয়োজনীয় সম্পত্তি, এবং আমরা প্রদর্শনের উদ্দেশ্যে onLoad বৈশিষ্ট্য অন্তর্ভুক্ত করেছি। আরও তথ্যের জন্য, <APIProvider> উপাদান দেখুন।

আপনার app.tsx ফাইলের মত দেখতে হবে:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

সবকিছু সফল হলে, আপনি ব্রাউজার কনসোলে console.log বিবৃতি দেখতে পাবেন। এখন যেহেতু Maps JavaScript API লোড হয়েছে, আপনি পরবর্তী ধাপে গতিশীল মানচিত্র রেন্ডার করতে পারেন।

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

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

Maps JavaScript API-এর সবচেয়ে বেশি ব্যবহৃত অংশ হল google.maps.Map , যেটি এমন একটি শ্রেণী যা আপনাকে মানচিত্রের দৃষ্টান্তগুলি তৈরি এবং পরিচালনা করতে দেয়৷ vis.gl/react-google-map লাইব্রেরি এই ক্লাসটিকে Map উপাদানে মোড়ানো। প্রথমে, Map এবং MapCameraChangedEvent ক্লাস ইম্পোর্ট করুন।

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

Map উপাদানটি মানচিত্রের জন্য বিভিন্ন ধরনের বিভিন্ন সেটিংস সমর্থন করে। এই কোডল্যাবের জন্য, আপনি নিম্নলিখিত সেটিংস ব্যবহার করেন:

defaultCenter , যা মানচিত্রের কেন্দ্রের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ সেট করে।
defaultZoom , যা মানচিত্রের প্রাথমিক জুম স্তর সেট করে।
একটি মানচিত্র প্রদর্শন করতে, অস্ট্রেলিয়ার সিডনিতে মানচিত্রটিকে কেন্দ্রীভূত করতে APIProvider ট্যাগের মধ্যে নিম্নলিখিত কোডটি রাখুন এবং এটিকে 13 এর জুম স্তর দিন, যা শহরের কেন্দ্র দেখানোর জন্য সঠিক জুম স্তর:

 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

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

রিক্যাপ করার জন্য, এই বিভাগে আপনি <Map> উপাদান সহ একটি মানচিত্র প্রদর্শন করেছেন এবং বৈশিষ্ট্য সহ এর প্রাথমিক অবস্থা সেট করেছেন। ক্যামেরা পরিবর্তন হলে আপনি ইভেন্টগুলিকে ক্যাপচার করতেও ব্যবহার করেছেন।

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

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং যোগ করুন

উন্নত মার্কার ব্যবহার করার জন্য একটি মানচিত্র ID একটি প্রয়োজনীয়তা, যা আপনি আপনার সিডনির মানচিত্রে আগ্রহের পয়েন্টগুলি চিহ্নিত করতে ব্যবহার করেন৷ ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিংয়ের জন্য একটি মানচিত্র আইডিও ব্যবহার করা হয়।

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

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

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

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

আপনার তৈরি করা মানচিত্র ID ব্যবহার করতে, <Map> উপাদানটির mapId বৈশিষ্ট্য সেট করুন:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

আপনি মানচিত্রে নির্বাচিত শৈলী দেখতে হবে!

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

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

মানচিত্রে মার্কার স্থাপন করতে AdvancedMarker উপাদান ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

সিডনি এলাকায় আগ্রহের বিষয়গুলিকে উপস্থাপন করার জন্য বস্তুর একটি তালিকা তৈরি করুন, এটিকে App সংজ্ঞার বাইরে আপনার আমদানির ঠিক নীচে রাখুন:

type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);

<Pin> উপাদান দিয়ে আপনার পিনগুলি কাস্টমাইজ করুন:

<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />

অ্যাডভান্সড মার্কারগুলির সাথে আপনার তালিকা রেন্ডার করতে একটি কাস্টম উপাদান তৈরি করুন, এটিকে App সংজ্ঞার নীচে রাখুন:

const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Map উপাদানের একটি শিশু হিসাবে PoiMarkers উপাদান যোগ করুন:

<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>

অবশেষে, আপনার আমদানিতে Pin এবং AdvancedMarker যোগ করুন।

import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

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

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

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

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

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

মার্কার ক্লাস্টারিং সক্ষম করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

app.tsx ফাইলের শীর্ষে, আমাদের লাইব্রেরি আমদানি এবং সমর্থনকারী প্রকারগুলি আপডেট এবং যোগ করতে দিন৷

import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

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

PoiMarkers কম্পোনেন্টে MarkerClusterer এবং সহায়ক উপাদানগুলির জন্য ভেরিয়েবল তৈরি করুন।

MarkerClusterer আরম্ভ করার জন্য আপনাকে মানচিত্রের একটি উদাহরণ প্রয়োজন। useMap() হুক থেকে সেই উদাহরণটি পান:

const map = useMap();

একটি স্টেট ভেরিয়েবলে সংরক্ষিত মার্কারগুলির একটি তালিকা তৈরি করুন:

const [markers, setMarkers] = useState<{[key: string]: Marker}>({});

একটি রেফারেন্স হিসাবে ক্লাস্টার সংরক্ষণ করুন:

const clusterer = useRef<MarkerClusterer | null>(null);

এছাড়াও আপনার PoiMarkers উপাদানে, MarkerClusterer এর একটি উদাহরণ তৈরি করুন এবং এটিকে Map উদাহরণটি পাস করুন যেখানে আপনি মার্কার ক্লাস্টারগুলি প্রদর্শন করতে চান:

 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

মার্কার তালিকা পরিবর্তন হলে ক্লাস্টার আপডেট করে এমন একটি প্রভাব তৈরি করুন:

useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

নতুন মার্কারগুলির জন্য পুদিনা রেফারেন্সের জন্য একটি ফাংশন তৈরি করুন:

const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

প্রতিটি মার্কারের জন্য রেফারেন্স তৈরি করতে AdvancedMarker উপাদানে এই পদ্ধতিটি ব্যবহার করুন।

<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

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

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

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

আপনার PoiMarkers উপাদান এই মত হওয়া উচিত:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

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

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

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

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

আপনার মার্কারগুলিতে একটি click শ্রোতা যোগ করতে এবং তারপর প্রোগ্রাম্যাটিকভাবে ম্যাপ প্যানটি তৈরি করুন যাতে ক্লিক করা মার্কারটি মানচিত্রের কেন্দ্রে উপস্থিত হয়, এই পদক্ষেপগুলি অনুসরণ করুন:

একটি click হ্যান্ডলার কলব্যাক তৈরি করুন।

PoiMarkers কম্পোনেন্টে, React এর useCallback() সহ একটি click হ্যান্ডলার সংজ্ঞায়িত করুন।

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

একবার আপনার অক্ষাংশ এবং দ্রাঘিমাংশ পেয়ে গেলে, ইভেন্ট হ্যান্ডলারের কলব্যাক ফাংশনে নিম্নলিখিতগুলি যোগ করে ক্লিক করা মার্কারে মানচিত্রটি মসৃণভাবে প্যান করার জন্য Map ইনস্ট্যান্সের অন্তর্নির্মিত panTo() ফাংশনে পাস করুন:

const PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};

মার্কারগুলিতে click হ্যান্ডলারগুলিকে বরাদ্দ করুন।

vis.gl/react-google-map লাইব্রেরির AdvancedMarker উপাদান দুটি বৈশিষ্ট্য প্রকাশ করে যা ক্লিক পরিচালনার জন্য সহায়ক:

clickable : সত্য হলে, AdvancedMarker ক্লিকযোগ্য হবে এবং gmp-click ইভেন্টটি ট্রিগার করবে এবং অ্যাক্সেসযোগ্যতার উদ্দেশ্যে ইন্টারেক্টিভ হবে। উদাহরণস্বরূপ, এটি তীর কীগুলির সাহায্যে কীবোর্ড নেভিগেশনের অনুমতি দেবে।
onClick : একটি click ইভেন্ট ঘটলে কল করার জন্য কলব্যাক ফাংশন।

প্রতিটি মার্কারকে একটি click হ্যান্ডলার বরাদ্দ করতে আপনার PoiMarkers রেন্ডারিং আপডেট করুন:

return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );

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

রিক্যাপ করার জন্য, এই বিভাগে, আপনি মানচিত্রের সমস্ত মার্কারকে একটি click হ্যান্ডলার বরাদ্দ করতে প্রতিক্রিয়ার ইভেন্ট সিস্টেম ব্যবহার করেছেন, ফায়ার করা click ইভেন্ট থেকে মার্কারটির অক্ষাংশ এবং দ্রাঘিমাংশ পুনরুদ্ধার করেছেন এবং যখনই একটি মার্কারকে ক্লিক করা হয় তখন মানচিত্রটিকে রিসেন্টার করতে ব্যবহার করেছেন৷

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

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

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

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

মানচিত্র জাভাস্ক্রিপ্ট এপিআই মানচিত্রে আকৃতি আঁকার জন্য ফাংশনের একটি সেট অন্তর্ভুক্ত করে, যেমন বর্গক্ষেত্র, বহুভুজ, লাইন এবং বৃত্ত। vis.gl/react-google-map লাইব্রেরি এই ক্ষমতাগুলি আপনার জন্য প্রতিক্রিয়াতে উপলব্ধ করে।

এরপরে, আপনি একটি বৃত্ত রেন্ডার করেন যাতে একটি মার্কারের চারপাশে 800-মিটার (প্রায় আধা-মাইল) ব্যাসার্ধ দেখানো হয় যখন এটি ক্লিক করা হয়।

স্টার্টার সংগ্রহস্থলে একটি circle উপাদানের জন্য একটি কাস্টম উপাদান রয়েছে। আপনি এটি src/components/circle.tsx ফাইলে খুঁজে পেতে পারেন।

ব্যবহারকারীদের মানচিত্রে আঁকতে দেওয়ার জন্য, এই পদক্ষেপগুলি অনুসরণ করুন:

প্রদত্ত সার্কেল উপাদান অন্তর্ভুক্ত করতে আপনার আমদানি আপডেট করুন৷

import {Circle} from './components/circle'

বৃত্ত কেন্দ্রের জন্য একটি রাষ্ট্র পরিবর্তনশীল তৈরি করুন।

আপনার PoiMarkers উপাদানে আপনার বৃত্তের কেন্দ্রের অবস্থা ক্যাপচার করুন। আপনি প্রারম্ভিক অবস্থাটিকে শূন্যে সেট করেছেন এবং এই বিষয়টিতে ঝুঁকছেন যে একটি বৃত্ত রেন্ডার হবে না যদি না এটির একটি বৈধ কেন্দ্র অবস্থান (এবং ব্যাসার্ধ) থাকে।

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};

একটি click ইভেন্ট পরিচালনা করা হলে চেনাশোনা কেন্দ্র আপডেট করুন।

ইভেন্ট অবজেক্টে পাওয়া অবস্থানের সাথে setCircleCenter কল করুন:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

মানচিত্রের জাভাস্ক্রিপ্ট API-এ অঙ্কন ফাংশনগুলি আপনাকে মানচিত্রে একটি আঁকা বস্তু কীভাবে প্রদর্শিত হয় তার জন্য বিভিন্ন ধরণের বিকল্প দেয়। একটি বৃত্তাকার ব্যাসার্ধ রেন্ডার করতে, বৃত্তের উপাদানের বৈশিষ্ট্যগুলি সেট করুন, যেমন রঙ এবং স্ট্রোকের ওজন, যেখানে বৃত্তটি কেন্দ্রীভূত হওয়া উচিত এবং এর ব্যাসার্ধ।

আপনার রেন্ডারিংয়ে একটি বৃত্ত যোগ করুন এবং কেন্দ্রটিকে আপনার রাজ্য পরিবর্তনশীলের সাথে আবদ্ধ করুন। আপনার রেন্ডারিং এই মত হওয়া উচিত:

return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

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

10. অভিনন্দন

আপনি Google মানচিত্র প্ল্যাটফর্মের জন্য vis.gl/react-google-map লাইব্রেরির মাধ্যমে আপনার প্রথম ওয়েব অ্যাপ তৈরি করেছেন, যার মধ্যে রয়েছে Maps JavaScript API লোড করা, একটি মানচিত্র লোড করা, মার্কারগুলির সাথে কাজ করা, মানচিত্রে নিয়ন্ত্রণ করা এবং অঙ্কন করা এবং ব্যবহারকারীর ইন্টারঅ্যাকশন যোগ করা।

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