JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

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

CSS

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

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 53,
      lng: 0
    },
    zoom: 13
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
    drawingMode: null
  });
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
    infowindow.setContent("polygon area="+area.toFixed(2)+" sq meters");
    infowindow.setPosition(polygon.getPath().getAt(0));
    infowindow.open(map);
  });
  drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);