yudaduy

Marker Clustering Example

Sep 19th, 2021 (edited)
831
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Marker Clustering</title>
  5.     <style>
  6.         /* Always set the map height explicitly to define the size of the div
  7.        * element that contains the map. */
  8.         #map {
  9.         height: 100%;
  10.         }
  11.  
  12.         /* Optional: Makes the sample page fill the window. */
  13.         html,
  14.         body {
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.         }
  19.     </style>
  20.  
  21.     <!-- jsFiddle will insert css and js -->
  22.   </head>
  23.   <body>
  24.     <div id="map"></div>
  25.  
  26.     <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  27.     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  28.     <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
  29.     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2" async></script>
  30.  
  31.     <script>
  32. function initMap() {
  33.   const map = new google.maps.Map(document.getElementById("map"), {
  34.     zoom: 4,
  35.     center: { lat: -28.024, lng: 140.887 },
  36.   });
  37.  
  38.   const markers = locations.map((location, i) => {
  39.     return new google.maps.Marker({
  40.       position: new google.maps.LatLng(locations[i][0], locations[i][1]),
  41.     });
  42.   });
  43.  
  44.   // Add a marker clusterer to manage the markers.
  45.   new MarkerClusterer(map, markers, {
  46.     imagePath:
  47.       "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  48.   });
  49. }
  50.  
  51. const locations = [
  52.   [-31.56391,147.154312 ],
  53.   [-33.718234,150.363181 ],
  54.   [-33.727111,150.371124 ],
  55.   [-33.848588,151.209834 ],
  56.   [-33.851702,151.216968 ],
  57.   [-34.671264,150.863657 ],
  58.   [-35.304724,148.662905 ],
  59.   [-36.817685,175.699196 ],
  60.   [-36.828611,175.790222 ],
  61.   [-37.75,145.116667 ],
  62.   [-37.759859,145.128708 ],
  63.   [-37.765015,145.133858 ],
  64.   [-37.770104,145.143299 ],
  65.   [-37.7737,145.145187 ],
  66.   [-37.774785,145.137978 ],
  67.   [-37.819616,144.968119 ],
  68.   [-38.330766,144.695692 ],
  69.   [-39.927193,175.053218 ],
  70.   [-41.330162,174.865694 ],
  71.   [-42.734358,147.439506 ],
  72.   [-42.734358,147.501315 ],
  73.   [-42.735258,147.438 ],
  74.   [-43.999792,170.463352 ],
  75. ];
  76.  
  77.     </script>
  78.   </body>
  79. </html>
RAW Paste Data