JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

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

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var drawingManager = new google.maps.drawing.DrawingManager({
    map: map,
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.RECTANGLE,
        google.maps.drawing.OverlayType.POLYGON

      ]
    },
    polygonOptions: {
      fillColor: 'green',
      fillOpacity: 0.4,
      strokeWeight: 1,
      clickable: true,
      zIndex: 1,
      editable: false
    }
  });
  drawingManager.addListener('polygoncomplete', function(polygon) {
    var bounds = new google.maps.LatLngBounds();
    console.log(bounds);

    polygon.getPaths().forEach(function(path) {
      path.forEach(function(latlng) {
        bounds.extend(latlng);
        console.log(bounds);
        map.fitBounds(bounds);
      });
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);