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

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

खास जानकारी

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

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

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

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

TypeScript

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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: -28.024, lng: 140.887 },
      mapId: 'DEMO_MAP_ID',
    }
  );

  const infoWindow = new google.maps.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 google.maps.marker.PinElement({
      glyph: label,
      glyphColor: "white",
    })
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position,
      content: pinGlyph.element,
    });

    // markers can only be keyboard focusable when they have click listeners
    // open info window when marker is clicked
    marker.addListener("click", () => {
      infoWindow.setContent(position.lat + ", " + position.lng);
      infoWindow.open(map, marker);
    });
    return marker;
  });

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

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 },
];

initMap();
index.ts

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

JavaScript

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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: -28.024, lng: 140.887 },
    mapId: "DEMO_MAP_ID",
  });
  const infoWindow = new google.maps.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 google.maps.marker.PinElement({
      glyph: label,
      glyphColor: "white",
    });
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position,
      content: pinGlyph.element,
    });

    // markers can only be keyboard focusable when they have click listeners
    // open info window when marker is clicked
    marker.addListener("click", () => {
      infoWindow.setContent(position.lat + ", " + position.lng);
      infoWindow.open(map, marker);
    });
    return marker;
  });

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

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 },
];

initMap();
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
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>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

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

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

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

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

   NPM

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

   npm install @googlemaps/markerclusterer

   सीडीएन

   यहां दी गई स्क्रिप्ट, unpkg.com CDN से लाइब्रेरी का नया 1.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 });

   सीडीएन

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

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

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

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

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

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