গুগল ম্যাপস API এর মাধ্যমে একাধিক মার্কার (marker) একসাথে প্রদর্শন করা একটি সাধারণ প্রয়োজন হতে পারে, বিশেষ করে যখন অনেকগুলো স্থান বা পজিশন একযোগে মানচিত্রে দেখাতে হয়। তবে, একাধিক মার্কার একসাথে দেখানো হলে মানচিত্রটি অত্যন্ত ভীড় হয়ে যেতে পারে এবং এটি ব্যবহারকারীর জন্য সমস্যাজনক হতে পারে। এই ধরনের সমস্যা সমাধান করতে Marker Clustering ব্যবহার করা হয়।
Marker Clustering একটি পদ্ধতি, যা একই এলাকায় থাকা মার্কারগুলিকে একটি ক্লাস্টার (cluster) হিসাবে গ্রুপ করে, এবং ব্যবহারকারীর জুম লেভেল অনুযায়ী ক্লাস্টারটি খোলার (expand) বা বন্ধ (collapse) হওয়ার সুবিধা প্রদান করে। এতে মানচিত্রের পরিষ্কারতা বজায় থাকে এবং ব্যবহারকারী অভিজ্ঞতা আরও উন্নত হয়।
Marker Clustering এর মূল সুবিধা
- ম্যানেজেবল মার্কার সংখ্যা: একাধিক মার্কার একসাথে প্রদর্শন না করে, কাছাকাছি থাকা মার্কারগুলোকে একত্রিত করে দেখানো হয়।
- জুম লেভেল অনুযায়ী ক্লাস্টার খুলে ও বন্ধ হয়: ব্যবহারকারী যখন মানচিত্রে জুম ইন বা জুম আউট করেন, তখন ক্লাস্টারগুলো স্বয়ংক্রিয়ভাবে খোলে বা বন্ধ হয়, যা একটি পরিষ্কার এবং সুশৃঙ্খল মানচিত্র প্রদর্শন করে।
- প্রদর্শনযোগ্যতা: ক্লাস্টারগুলির মধ্যে অনেকগুলো মার্কার থাকতে পারে, কিন্তু শুধুমাত্র কয়েকটি ক্লাস্টার দেখা যায়, যা স্ক্রীন স্পেসের অপচয় কমায়।
Marker Clustering ব্যবহার করার পদক্ষেপ
Google Maps API এবং MarkerClusterer লাইব্রেরি লোড করুন: গুগল ম্যাপস এবং Marker Clustering ব্যবহার করতে, প্রথমে আপনার HTML ফাইলে Google Maps JavaScript API এবং
markerclusterer.jsলাইব্রেরিটি যুক্ত করতে হবে। এটি আপনাকে ক্লাস্টারিং ফিচারটি ব্যবহার করতে সহায়তা করবে।<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>মানচিত্র এবং মার্কার তৈরি করুন: এরপর, আপনার মানচিত্র (map) তৈরি করতে হবে এবং এর ওপর মার্কারগুলো যোগ করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html> <html> <head> <title>Marker Clustering Example</title> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <style> /* মানচিত্রের সাইজ */ #map { height: 500px; width: 100%; } </style> </head> <body> <h3>Google Maps Marker Clustering</h3> <div id="map"></div> <script> function initMap() { // মানচিত্র তৈরি করা var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 23.8103, lng: 90.4125 }, // ঢাকার অবস্থান zoom: 12 }); // একাধিক মার্কার তৈরির জন্য একটি অ্যারে (array) var markers = [ new google.maps.Marker({ position: {lat: 23.8103, lng: 90.4125} }), new google.maps.Marker({ position: {lat: 23.8153, lng: 90.4205} }), new google.maps.Marker({ position: {lat: 23.8221, lng: 90.4355} }), new google.maps.Marker({ position: {lat: 23.7951, lng: 90.3985} }), new google.maps.Marker({ position: {lat: 23.8300, lng: 90.4500} }) ]; // মার্কার ক্লাস্টার তৈরি করা var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); } </script> </body> </html>- কোডের ব্যাখ্যা:
- Google Maps API: এখানে Google Maps API সঠিকভাবে লোড করা হয়েছে, যেখানে আপনার API Key বসাতে হবে।
- MarkerClusterer: এটি একটি JavaScript লাইব্রেরি যা মার্কার ক্লাস্টারিং ফিচারটি ব্যবস্থাপনা করে।
- Markers Array: বিভিন্ন জায়গার জন্য মার্কার তৈরি করা হয়েছে। আপনি এখানেই আপনার প্রয়োজনীয় মার্কারগুলোর তথ্য যোগ করতে পারেন।
- MarkerClusterer এর ব্যবহার:
MarkerClustererব্যবহার করে, একাধিক মার্কার ক্লাস্টার করা হচ্ছে, যাতে মানচিত্রটি পরিষ্কার থাকে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
সারাংশ
Google Maps API এর মাধ্যমে Marker Clustering ব্যবহার করে একাধিক মার্কারকে ক্লাস্টার করা একটি কার্যকরী পদ্ধতি, যা মানচিত্রে ভীড় কমিয়ে ব্যবহারকারীর জন্য একটি পরিষ্কার এবং সুশৃঙ্খল দৃশ্য তৈরি করে। এটি মানচিত্রের কার্যকারিতা বৃদ্ধি করে, কারণ ক্লাস্টারিংয়ের মাধ্যমে আমরা অনেকগুলো মার্কার একযোগে একটি ছোট অঞ্চলে প্রদর্শন করতে পারি, এবং ব্যবহারের সময় মানচিত্রের রেসপন্সিভনেস বজায় থাকে।
Read more
