JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&amp;ext=.js"></script>
<input id="coords" style="width:600px" />
<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: 46.435812,
      lng: 27.639917
    },
    zoom: 17,
    mapTypeId: 'hybrid'
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
  });
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var coordStr = "";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      coordStr += polygon.getPath().getAt(i).toUrlValue(6) + ";";
      console.log(coordStr);
      document.getElementById('coords').value = coordStr;
    }
  });
  drawingManager.setMap(map);
};
google.maps.event.addDomListener(window, "load", initMap);