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="map"></div>

CSS

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

JavaScript

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 25.774252,
      lng: -80.190262
    },
    zoom: 2
  });

  var latlngs = [
    [{
      lat: 25.774252,
      lng: -80.190262
    }, {
      lat: 18.466465,
      lng: -66.118292
    }, {
      lat: 32.321384,
      lng: -64.757370
    }, {
      lat: 25.774252,
      lng: -80.190262
    }, ],
    [{
      lat: 59.677361,
      lng: -2.469846
    }, {
      lat: 59.299717,
      lng: -6.314917
    }, {
      lat: 57.877247,
      lng: -9.314917
    }, {
      lat: 54.428078,
      lng: -11.638861
    }, {
      lat: 51.784554,
      lng: -11.702241
    }]
  ];
  for (var y = 0; y < latlngs.length; y++) {
    createEditablePolygon(latlngs[y], y);
  }
}

function createEditablePolygon(latlngs, index) {
  var sample = [];
  for (var z = 0; z < latlngs.length; z++) {
    sample.push(new google.maps.LatLng(parseFloat(latlngs[z].lat), parseFloat(latlngs[z].lng)));
  }

  var boundary = new google.maps.Polygon({
    paths: sample,
    strokeColor: 'black',
    strokeWeight: 2,
    fillColor: 'black',
    fillOpacity: 0.2,
    zIndex: 1,
    content: 'AREA ' + index
  });
  boundary.setMap(map);

  var infoWindow = new google.maps.InfoWindow;
  boundary.addListener('click', function(event) {
    // toggle editable state
    boundary.setEditable(!boundary.getEditable());
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);