Marker Clustering

by designworksinteractive

HTML

<div id="map"></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=AIzaSyB2VZvngp-Tff39y4oBI3Ox7jytqDEQoNs&callback=initMap"></script>

CSS

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

JavaScript

// Map variable
var map;

// Create and style the map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(25.7819743, -80.2006986),
    mapTypeId: 'roadmap',
    styles: [{
      "featureType": "all",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "all",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "administrative.country",
      "elementType": "labels.text",
      "stylers": [{
        "visibility": "off"
      }, {
        "color": "#ff0000"
      }]
    }, {
      "featureType": "administrative.province",
      "elementType": "labels.text.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "invert_lightness": !0
      }, {
        "color": "#ffffff"
      }]
    }, {
      "featureType": "administrative.locality",
      "elementType": "labels.text.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": "-46"
      }, {
        "color": "#ffffff"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#d8a361"
      }, {
        "visibility": "on"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#c48c46"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#cf944b"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#cf944b"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#c48c46"
      }]
    }, {
     ...