JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="areas"></div>

CSS

html,
body,
#areas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

/* Google Map - Areas we cover */

var center = new google.maps.LatLng(51.2576646, -0.3258271);

function initialize() {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  var isDraggable = w > 480 ? true : false;
  var mapOptions = {
    zoom: 7,
    center: center,
    scrollwheel: false,
    draggable: isDraggable,
    disableDefaultUI: true,
    zoomControl: true
  };
  var map = new google.maps.Map(document.getElementById('areas'),
    mapOptions);
  var styles = [{
    "featureType": "landscape.man_made",
    "elementType": "geometry.fill",
    "stylers": [{
      "saturation": "-63"
    }, {
      "lightness": "23"
    }]
  }, {
    "featureType": "landscape.natural",
    "elementType": "geometry.fill",
    "stylers": [{
      "saturation": "-100"
    }, {
      "lightness": "25"
    }]
  }, {
    "featureType": "landscape.natural.terrain",
    "elementType": "geometry.fill",
    "stylers": [{
      "saturation": "0"
    }]
  }, {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [{
      "saturation": "0"
    }, {
      "color": "#95bf97"
    }, {
      "lightness": "59"
    }]
  }, {
    "featureType": "poi.school",
    "elementType": "geometry.fill",
    "stylers": [{
      "lightness": "5"
    }, {
      "hue": "#ff0000"
    }, {
      "saturation": "-100"
    }]
  }, {
    "featureType": "poi.sports_complex",
    "elementType": "geometry.fill",
    "stylers": [{
      "lightness": "5"
    }, {
      "saturation": "-100"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [{
      "saturation": "-85"
    }, {
      "lightness": "12"
    }]
  }];
  var bounds = new google.maps.LatLngBounds();
  // Areas Circle Polygon

  var myCoordinates = [
    new google.maps.LatLng(51.522416, -0.142822),
    new google.maps.LatLng(51.426614, -0.845947),
    new google.maps.LatLng(51.303145, -1.109619),
    new google.maps.LatLng(51.110420, -1.252441),
   ...