Marker Clustering

by Michael Menaker

HTML

<script src="https://unpkg.com/[email protected]/distribute/nouislider.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/distribute/nouislider.min.css">
<div id="map"></div>
<div id="slider"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 75%;
}

/* Optional: Makes the sample page fill the window. */

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

JavaScript

function initMap() {
  let map = createMap();
  let slider = createSlider();

  // Add a marker clusterer to manage the markers.
  var markerClusterer = new MarkerClusterer(map, getMarkers(_people), {
    imagePath: _imagePath
  });

  slider.noUiSlider.on('set', values => {
    markerClusterer.clearMarkers();
    const filteredPeople = filterPeople(values[0], values[1]);
    markerClusterer = new MarkerClusterer(map, getMarkers(filteredPeople), {
      imagePath: _imagePath
    });

  });
}

function createSlider() {
  var slider = document.getElementById('slider');

  noUiSlider.create(slider, {
    start: [1930, 2015],
    connect: true,
    range: {
      min: 1940,
      max: 2015
    },
    pips: { // Show a scale with the slider
      mode: 'positions',
      values: [0, 25, 50, 75, 100],
      density: 4
    }
  });

  return slider;
}

function createMap() {
  return new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });
}

_infoWindow = null;

function getMarkers(people) {
  markers = [];

  people.forEach(person => {
    var marker = new google.maps.Marker({
      position: {
        lat: person.lat,
        lng: person.long
      },
      title: person.name
    });

    var location = person.generated.location;
    var contentString = `<img src="http://216.92.159.135/tkfgen.png"><b>${person.name}</b>
        <br>${location}<br>${person.yearFrom} - ${person.yearTo}`;

    marker.addListener('click', function() {
      if (_infoWindow != null) {
        _infoWindow.close();
      }
      _infoWindow = new google.maps.InfoWindow({
        content: contentString
      });
      _infoindow.open(map, marker);
    });

    markers.push(marker);
  });

  return markers;
}

function filterPeople(yearStart, yearEnd) {
  return _people.filter(person => {
    return person.yearFrom <= yearEnd && person.yearTo >= yearStart;
  });
}

var _imagePath =...