JSFiddle - React, Tailwind, and code Playground

by ABBEYSOFT

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&amp;ext=.js"></script>
<input id="btn" value="get polyline data" type="button" />
<div id="map"></div>
<div id="output"></div>

CSS

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

JavaScript

var polylines = [];

function initMap() {
  //set center coordinate
  var myLat = 42 /*value*/ ;
  var myLng = -72 /*value*/ ;
  var center = {
    lat: myLat,
    lng: myLng
  };

  //create map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: center
  });

  addDrawingControl(map);
}

function addDrawingControl(map) {
  //add drawing control
  var drawingControl = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE
      ]
    },
    polylineOptions: {
      editable: true,
      draggable: false,
      geodesic: true
    }
  });
  drawingControl.setMap(map);
  //end of add drawing control

  //add event listener
  google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline) {
    polylines.push(polyline);
    var polylinePath = polyline.getPath();
    console.log("polyline : " + polylinePath.getArray());
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    var htmlStr = "";
    for (var i = 0; i < polylines.length; i++) {
      htmlStr += "polyline #" + i + " # vertices=" + polylines[i].getPath().getLength() + " length=" + google.maps.geometry.spherical.computeLength(polylines[i].getPath()).toFixed(2) + " km<br>";
      for (var j = 0; j < +polylines[i].getPath().getLength(); j++) {
        htmlStr += "&nbsp;&nbsp;" + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
      }
    }
    document.getElementById('output').innerHTML = htmlStr;
  })
}
google.maps.event.addDomListener(window, "load", initMap);