मार्कर क्लस्टरिंग

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

खास जानकारी

इस ट्यूटोरियल में, मार्कर क्लस्टर का इस्तेमाल करके, मैप पर बड़ी संख्या में मार्कर दिखाने का तरीका बताया गया है. Maps JavaScript API के साथ @googlemaps/markerclusterer लाइब्रेरी का इस्तेमाल करके, आस-पास के मार्कर को क्लस्टर में जोड़ा जा सकता है. साथ ही, मैप पर मार्कर को आसानी से दिखाया जा सकता है.

मार्कर क्लस्टरिंग की सुविधा कैसे काम करती है, यह जानने के लिए नीचे दिया गया मैप देखें.

किसी क्लस्टर पर मौजूद संख्या से पता चलता है कि उसमें कितने मार्कर शामिल हैं. ध्यान दें कि क्लस्टर की किसी भी जगह पर ज़ूम इन करने पर, क्लस्टर पर मौजूद संख्या कम हो जाती है. साथ ही, आपको मैप पर अलग-अलग मार्कर दिखने लगते हैं. मैप को ज़ूम आउट करने पर, मार्कर फिर से क्लस्टर में बदल जाते हैं.

नीचे दिए गए सैंपल में, इस मैप को बनाने के लिए ज़रूरी पूरा कोड दिखाया गया है.

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();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

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();
index.js

सीएसएस

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

एचटीएमएल

<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>
index.html

उदाहरण के तौर पर, इस ट्यूटोरियल में locations कलेक्शन का इस्तेमाल करके, मैप में मार्कर का एक सेट जोड़ा गया है. अपने मैप के लिए मार्कर पाने के लिए, अन्य सोर्स का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, मार्कर बनाने की गाइड पढ़ें.

मार्कर क्लस्टर जोड़ना

मार्कर क्लस्टरर जोड़ने के लिए, यह तरीका अपनाएं:

1. अपने पेज या ऐप्लिकेशन में मार्कर क्लस्टरिंग लाइब्रेरी जोड़ें. यह लाइब्रेरी, NPM पर @googlemaps/markerclusterer और GitHub पर रिपॉज़िटरी में उपलब्ध है.

   NPM

   NPM का इस्तेमाल करके, @googlemaps/markerclusterer लाइब्रेरी का नया वर्शन इंस्टॉल करें.

   npm install @googlemaps/markerclusterer

   CDN

   नीचे दी गई स्क्रिप्ट, unpkg.com सीडीएन से लाइब्रेरी का सबसे नया 2.x.x वर्शन लोड करती है.

   <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

   सीडीएन से ऐक्सेस करने पर, लाइब्रेरी markerClusterer ग्लोबल में उपलब्ध होती है.

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

   यह सैंपल, markers ऐरे को MarkerClusterer में पास करता है.

3. मार्कर क्लस्टरर को पसंद के मुताबिक बनाएं.
   • रेंडरर इंटरफ़ेस की मदद से, क्लस्टर आइकॉन को पसंद के मुताबिक बनाएं.
   • क्लस्टर जनरेट करने के लिए, एल्गोरिदम में बदलाव करें.

ज़्यादा जानें

GitHub पर डेटा स्टोर करने की जगह में, मार्कर क्लस्टरिंग के ज़्यादा जटिल उदाहरण देखे जा सकते हैं. साथ ही, लाइब्रेरी के लिए रेफ़रंस दस्तावेज़ पढ़ा जा सकता है.