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

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

खास जानकारी

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

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

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

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

TypeScript

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();

JavaScript

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();

सीएसएस

/* 
 * 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;
}

एचटीएमएल

<html>
  <head>
    <title>Marker Clustering</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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>

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

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

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

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

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

    एनपीएम

    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. अपने ऐप्लिकेशन में मार्कर क्लस्टर जोड़ें.

    नीचे दिया गया कोड मैप में एक मार्कर क्लस्टर जोड़ता है.

    एनपीएम

    import { MarkerClusterer } from "@googlemaps/markerclusterer";
    
    const markerCluster = new MarkerClusterer({ markers, map });

    सीडीएन

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

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

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

  3. मार्कर क्लस्टर को पसंद के मुताबिक बनाएं.

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

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