JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://www.google.com/jsapi"></script>
<div id="radBut">
    <input type="radio" name="poly" id='polyline' checked>Polyline</input>
    <input type="radio" name="poly" id='polygon'>Polygon</input>
    <button id="clear">Clear</button>
</div>
<br/>
<div id="map"></div>

CSS

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

JavaScript

var Line = [];
   var polygon = [];

   var Latlngs = [];
   var Path;

   function initMap() {
       var goo = google.maps;
       map = new goo.Map(document.getElementById('map'), {
           zoom: 10,
           center: new goo.LatLng(12.8799313333, 77.5991386667)
       });
       line = new goo.Polyline({
           path: [],
           geodesic: true,
           strokeColor: '#FF0000',
           strokeOpacity: 1.0,
           strokeWeight: 2,
           map: map
       });

       polygon = new goo.Polygon({
           path: [],
           geodesic: true,
           strokeColor: '#FF0000',
           strokeOpacity: 1.0,
           strokeWeight: 2,
           map: null
       });
       markers = new goo.MVCArray;

       goo.event.addListener(map, 'click', function (e) {
           var marker = new goo.Marker({
               position: e.latLng,
               map: map,
               draggable: true
           });
           markers.push(marker);
           Latlngs.push([markers.indexOf(marker), marker.getPosition()]);
           //push new point to the path
           line.getPath().push(marker.getPosition());
           polygon.getPath().push(marker.getPosition());

           goo.event.addListener(marker, 'dragend', function () {
               //simply update the path
               line.getPath().setAt(markers.indexOf(this),
               this.getPosition());
               polygon.getPath().setAt(markers.indexOf(this),
               this.getPosition());

               var index = markers.indexOf(this);
               if (index !== -1) {
                   Latlngs[index] = [index, this.getPosition()];
               }
           });
           goo.event.addListener(marker, 'dblclick', function () {
               //remove marker and path-point
               line.getPath().removeAt(markers.indexOf(this));
               polygon.getPath().removeAt(markers.indexOf(this));
               markers.removeAt(markers.indexOf(this));
              ...