Google Maps marker clustering

Google Maps location clusters

by Daan De Smedt

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
  </head>

  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly" async></script>
  </body>

</html>

CSS

#map {
  height: 100%;
}

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

JavaScript

let map;
let infoWindow;

const locations = [{
    "lat": 51.172839,
    "lng": 4.150339
  },
  {
    "lat": 51.204226,
    "lng": 3.99224
  },
  {
    "lat": 51.265935,
    "lng": 4.702356
  },
  {
    "lat": 51.215736,
    "lng": 4.022947
  },
  {
    "lat": 51.111948,
    "lng": 4.278751
  },
  {
    "lat": 51.204226,
    "lng": 3.99224
  },
  {
    "lat": 50.944165,
    "lng": 3.716076
  },
  {
    "lat": 51.215736,
    "lng": 4.022947
  },
  {
    "lat": 51.112177,
    "lng": 4.377459
  },
  {
    "lat": 51.204226,
    "lng": 3.99224
  },
  {
    "lat": 51.215736,
    "lng": 4.022947
  },
  {
    "lat": 51.172839,
    "lng": 4.150339
  },
  {
    "lat": 51.172839,
    "lng": 4.150339
  },
  {
    "lat": 51.27147,
    "lng": 3.034356
  },
  {
    "lat": 51.049548,
    "lng": 3.717988
  },
  {
    "lat": 51.220856,
    "lng": 4.315088
  },
  {
    "lat": 51.049548,
    "lng": 3.717988
  },
  {
    "lat": 51.179638,
    "lng": 4.182477
  },
  {
    "lat": 50.944165,
    "lng": 3.716076
  },
  {
    "lat": 50.944165,
    "lng": 3.716076
  },
  {
    "lat": 50.944165,
    "lng": 3.716076
  },
  {
    "lat": 51.029205,
    "lng": 3.801072
  },
  {
    "lat": 51.220613,
    "lng": 4.130724
  },
  {
    "lat": 51.204226,
    "lng": 3.99224
  },
  {
    "lat": 51.189056,
    "lng": 3.990245
  },
  {
    "lat": 51.011586,
    "lng": 4.825011
  },
  {
    "lat": 51.055846,
    "lng": 4.111868
  },
  {
    "lat": 51.112742,
    "lng": 3.405998
  },
  {
    "lat": 50.938862,
    "lng": 4.032778
  },
  {
    "lat": 51.112742,
    "lng": 3.405998
  },
  {
    "lat": 51.112742,
    "lng": 3.405998
  },
  {
    "lat": 50.938645,
    "lng": 4.032905
  },
  {
    "lat": 50.382367,
    "lng": 4.035728
  },
  {
    "lat": 50.809469,
    "lng": 4.402241
  },
  {
    "lat": 50.809469,
    "lng": 4.402241
  },
  {
    "lat": 51.047455,
    "lng": 3.751132
  },
  {
    "lat": 51.204226,
    "lng": 3.99224
  },
  {
    "lat": 50.775532,
    "lng": 4.71053
  },
  {
    "lat":...