মার্কার ক্লাস্টারিং

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

এক নজরে

এই টিউটোরিয়াল থেকে আপনি জানতে পারবেন যে কীভাবে ম্যাপে বিপুল সংখ্যক মার্কার দেখাতে মার্কার ক্লাস্টার ব্যবহার করতে হয়। আপনি @googlemaps/markerclusterer লাইব্রেরি Maps JavaScript API-এর সাথে ব্যবহার করে কাছাকাছি থাকা মার্কারগুলিকে ক্লাস্টারে একত্রিত করতে পারেন এবং ম্যাপে মার্কারের ডিসপ্লে সহজ করতে পারেন।

মার্কার ক্লাস্টারিং কীভাবে কাজ করে তা দেখতে, নিম্নলিখিত ম্যাপটি দেখুন।

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

এই ম্যাপ তৈরি করার জন্য প্রয়োজনীয় সম্পূর্ণ কোডটি নিচের নমুনাতে দেখানো হয়েছে।

TypeScript

import { MarkerClusterer } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();

জাভাস্ক্রিপ্ট

import { MarkerClusterer } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Marker Clustering</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="-28.024,140.887"
            zoom="3"
            map-id="DEMO_MAP_ID"></gmp-map>
    </body>
</html>

উদাহরণ হিসেবে, এই টিউটোরিয়ালটি locations অ্যারে ব্যবহার করে ম্যাপে মার্কারের একটি সেট যোগ করে। আপনার ম্যাপের জন্য মার্কার পেতে আপনি অন্যান্য সোর্স ব্যবহার করতে পারেন। আরও তথ্যের জন্য, মার্কার তৈরি করা সংক্রান্ত নির্দেশিকা পড়ুন।

মার্কার ক্লাস্টারার যোগ করা

মার্কার ক্লাস্টারার যোগ করতে এইসব ধাপ অনুসরণ করুন:

  1. আপনার পৃষ্ঠা বা অ্যাপ্লিকেশনে মার্কার ক্লাস্টারিং লাইব্রেরি যোগ করুন। লাইব্রেরিটি NPM-এ @googlemaps/markerclusterer এবং GitHub-এ রিপোজিটরিতে উপলভ্য। লাইব্রেরি ইনস্টল করতে নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন:

    NPM

    NPM ব্যবহার করে @googlemaps/markerclusterer লাইব্রেরি ইনস্টল করুন।

    npm install @googlemaps/markerclusterer

    CDN

    নিম্নলিখিত স্ক্রিপ্ট unpkg.com CDN থেকে লাইব্রেরি লোড করে।

    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  2. আপনার অ্যাপে মার্কার ক্লাস্টারার যোগ করুন।

    নিম্নলিখিত কোডটি ম্যাপে একটি মার্কার ক্লাস্টারার যোগ করে। নিম্নলিখিত বিকল্পগুলির মধ্যে থেকে একটি বেছে নিন:

    NPM

    import { MarkerClusterer } from "@googlemaps/markerclusterer";

const markerCluster = new MarkerClusterer({ markers, map });

    CDN

    CDN-এর মাধ্যমে অ্যাক্সেস করা হলে, লাইব্রেরিটি markerClusterer গ্লোবাল-এর অধীনে উপলভ্য থাকে।

    const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

    এই নমুনাটি MarkerClusterer-এ markers অ্যারে পাস করে।

  3. (ঐচ্ছিক) ক্লাস্টার আইকনের চেহারা, ক্লাস্টারিং অ্যালগরিদম বা ক্লিক করার আচরণ পরিবর্তন করতে মার্কার ক্লাস্টারার কাস্টমাইজ করুন।

মার্কার ক্লাস্টার কাস্টমাইজ করা

ক্লাস্টারার ইনস্ট্যান্স তৈরি করার সময় MarkerClustererOptions অবজেক্টে অতিরিক্ত বিকল্প পাস করে আপনি MarkerClusterer কাস্টমাইজ করতে পারবেন:

  • renderer: ম্যাপে ক্লাস্টার মার্কার কীভাবে রেন্ডার করা হবে তা নিয়ন্ত্রণ করে।
  • algorithm এবং algorithmOptions: দূরত্ব এবং জুম লেভেলের উপর ভিত্তি করে মার্কারগুলি কীভাবে ক্লাস্টারে গ্রুপ করা হয় তা নিয়ন্ত্রণ করে।
  • onClusterClick: কোনও ব্যবহারকারী ক্লাস্টার মার্কার ক্লিক করলে ডিফল্ট আচরণ ওভাররাইড করে।

নিম্নলিখিত ম্যাপে কাস্টম ক্লাস্টার আইকন সহ মার্কার দেখানো হয়েছে।

ক্লাস্টার আইকন কাস্টমাইজ করুন

ডিফল্ট হিসেবে, SVG ক্লাস্টার আইকন তৈরি করতে MarkerClusterer এগুলি ব্যবহার করে: DefaultRenderer ক্লাস্টার মার্কারের চেহারা কাস্টমাইজ করতে, এমন একটি অবজেক্ট পাস করুন যা Renderer ইন্টারফেসকে renderer বিকল্পে প্রয়োগ করে।

Renderer ইন্টারফেসের জন্য একটি render(cluster, stats, map) পদ্ধতি প্রয়োজন যা একটি AdvancedMarkerElement (বা একটি লিগ্যাসি google.maps.Marker) প্রদান করে। render পদ্ধতি নিম্নলিখিত আর্গুমেন্ট গ্রহণ করে:

  • cluster (Cluster): মার্কারের গ্রুপকে দেখায়, যার মধ্যে রয়েছে:
    • count: ক্লাস্টারে দৃশ্যমান মার্কারের সংখ্যা।
    • position: ক্লাস্টারের google.maps.LatLng কেন্দ্র অবস্থান।
    • bounds: ক্লাস্টারের google.maps.LatLngBounds।
    • markers: ক্লাস্টারে থাকা মার্কারের অ্যারে।
  • stats (ClusterStats): বর্তমান রেন্ডার চক্রে সব ক্লাস্টার জুড়ে পরিসংখ্যান প্রদান করে, যেমন stats.clusters.markers.mean, min, max এবং sum। আপনি এই মানগুলি ব্যবহার করে, ক্লাস্টারগুলির আপেক্ষিক সাইজের উপর ভিত্তি করে সেগুলি ডায়নামিক স্টাইল করতে পারবেন।
  • map (google.maps.Map): ম্যাপ ইনস্ট্যান্স।

নিম্নলিখিত উদাহরণে একটি কাস্টম renderer সংজ্ঞায়িত করা হয়েছে যা প্রতিটি AdvancedMarkerElement-এর জন্য একটি বৃত্তাকার HTML ব্যাজ তৈরি করে এবং ক্লাস্টার মার্কারের সংখ্যা গড় ক্লাস্টার সাইজের থেকে বেশি হলে এর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে।

TypeScript

// Customize the cluster icons using a custom Renderer
    const renderer = {
        render: (
            {
                count,
                position,
            }: { count: number; position: google.maps.LatLng },
            stats: ClusterStats
        ) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

জাভাস্ক্রিপ্ট

// Customize the cluster icons using a custom Renderer
    const renderer = {
        render: ({ count, position }, stats) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

সম্পূর্ণ কাস্টম রেন্ডারারের উদাহরণ দেখুন

TypeScript

import { MarkerClusterer, ClusterStats } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    await customElements.whenDefined('gmp-map');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Customize the cluster icons using a custom Renderer
    const renderer = {
        render: (
            {
                count,
                position,
            }: { count: number; position: google.maps.LatLng },
            stats: ClusterStats
        ) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();

জাভাস্ক্রিপ্ট

import { MarkerClusterer } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    await customElements.whenDefined('gmp-map');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Customize the cluster icons using a custom Renderer
    const renderer = {
        render: ({ count, position }, stats) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();

CSS

html,
body,
gmp-map {
    height: 100%;
    margin: 0;
    padding: 0;
}

.custom-cluster-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.large-cluster {
    background-color: #ff0000;
}

.small-cluster {
    background-color: #0000ff;
}

HTML

<html>
    <head>
        <title>marker-clustering-custom</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="-28.024, 140.887"
            zoom="3"
            map-id="DEMO_MAP_ID"></gmp-map>
    </body>
</html>

অতিরিক্ত রেন্ডারার উদাহরণের জন্য, এখানে দেখুন: রেন্ডারার ব্যবহার সংক্রান্ত ডেমো।

ক্লাস্টারিং অ্যালগরিদম পরিবর্তন করো

ডিফল্ট হিসেবে, MarkerClusterer SuperClusterAlgorithm ব্যবহার করে, যা k-d ট্রি ব্যবহার করে মার্কার ক্লাস্টার করে। আপনি algorithm বিকল্পে অ্যালগরিদম ইনস্ট্যান্স পাস করে বা algorithmOptions-এ ডিফল্ট অ্যালগরিদমের বিকল্প পাস করে ক্লাস্টারিং আচরণ কাস্টমাইজ করতে পারেন।

লাইব্রেরিতে নিম্নলিখিত বিল্ট-ইন অ্যালগরিদম অন্তর্ভুক্ত:

  • SuperClusterAlgorithm (ডিফল্ট): k-d ট্রি ব্যবহার করে দ্রুত জিওস্পেশিয়াল পয়েন্ট ক্লাস্টারিং। সাধারণ বিকল্পের মধ্যে এগুলি অন্তর্ভুক্ত:
    • maxZoom: সর্বাধিক জুম লেভেল যেখানে ক্লাস্টার তৈরি করা হয় (ডিফল্ট: 16)। maxZoom-এর উপরে জুম লেভেলে, ক্লাস্টার না করে স্বতন্ত্র মার্কার দেখানো হয়।
    • radius: পিক্সেলে ক্লাস্টার ব্যাসার্ধ (ডিফল্ট: 60)।
    • minPoints: ক্লাস্টার তৈরি করার জন্য প্রয়োজনীয় মার্কারের ন্যূনতম সংখ্যা (ডিফল্ট: 2)।
  • SuperClusterViewportAlgorithm: SuperClusterAlgorithm-এর একটি ভিউপোর্ট-ফিল্টার করা ভেরিয়েন্ট যা শুধুমাত্র বর্তমান ম্যাপ ভিউপোর্টের মধ্যে মার্কার ক্লাস্টার করে এবং তার সাথে একটি পিক্সেল প্যাডিং (viewportPadding, ডিফল্ট: 60) যোগ করে।
  • GridAlgorithm: গ্রিড-ভিত্তিক ক্লাস্টারিং অ্যালগরিদম। সাধারণ বিকল্পের মধ্যে রয়েছে maxZoom (ডিফল্ট: 16), gridSize (পিক্সেলে গ্রিডের সাইজ, ডিফল্ট: 40) এবং maxDistance (ক্লাস্টার সেন্টার ও মার্কারের মধ্যে মিটারে সর্বাধিক দূরত্ব, ডিফল্ট: 40000)।
  • NoopAlgorithm: ক্লাস্টার না করে সব মার্কার রেন্ডার করে।

নিচের উদাহরণে কাস্টম radius ও maxZoom সহ SuperClusterAlgorithm কনফিগার করা হয়েছে:

import {MarkerClusterer, SuperClusterAlgorithm} from '@googlemaps/markerclusterer';

const markerCluster = new MarkerClusterer({
  map,
  markers,
  algorithm: new SuperClusterAlgorithm({
    radius: 80,
    maxZoom: 15,
  }),
});

বিভিন্ন অ্যালগরিদম কীভাবে কাজ করে তা তুলনা করতে, অ্যালগরিদম তুলনা ডেমো দেখুন।

ক্লাস্টার ক্লিক বিহেভিয়ার কাস্টমাইজ করুন

ডিফল্ট হিসেবে, ক্লাস্টার মার্কার ক্লিক করলে, ম্যাপ ভিউপোর্ট ক্লিক করা ক্লাস্টারের সীমার সাথে ফিট হয়ে যায় (map.fitBounds(cluster.bounds))। কোনও ব্যবহারকারী ক্লাস্টারে ক্লিক করলে কী হবে তা কাস্টমাইজ করতে, onClusterClick বিকল্পে কলব্যাক ফাংশন পাস করুন:

const markerCluster = new MarkerClusterer({
  map,
  markers,
  onClusterClick: (event, cluster, map) => {
    // Zoom in by 2 levels centered on the cluster position
    map.setCenter(cluster.position);
    map.setZoom((map.getZoom() ?? 3) + 2);
  },
});

আরও জানুন

আপনি GitHub-এ রিপোজিটরি থেকে মার্কার ক্লাস্টারিংয়ের আরও জটিল উদাহরণ দেখতে এবং লাইব্রেরির রেফারেন্স ডকুমেন্টেশন পড়তে পারবেন।