JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>

CSS

#map-canvas{
    height:400px;
    margin:0;
    padding:0;
    width:100%;
}

JavaScript

var map = null;
var bounds = new google.maps.LatLngBounds();

var drawEdgesPoly = function(poly) {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 100;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  var centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  var polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(center,
      padding+google.maps.geometry.spherical.computeDistanceBetween(center,vertices.getAt(i)),
      google.maps.geometry.spherical.computeHeading(center,vertices.getAt(i)));
      bounds.extend(newPath[i]);
  }
  // render outer shape
  var outer = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
    map.fitBounds(bounds);
};

$(function(){
    mapOptions = new Object();
    mapOptions.zoom=19;
    mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
    mapOptions.mapTypeId=google.maps.MapTypeId.HYBRID;
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        console.log(event.latLng);
    });
    var polypoints = "(33.575802425924934,...