JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,drawing,geometry"></script>
<script src="http://www.geocodezip.com/scripts/javascript.util.js"></script>
<script src="http://www.geocodezip.com/scripts/jsts.js"></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));
    bounds.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) {
   ...