Drawing tools

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="map"></div>
 <div id="info" style="width:550px;height:150px;border:1px solid"></div>
    <button onclick="removeLine()">Undo Line</button>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
         async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 70%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
          });
         
          var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: ['polygon', 'polyline']
            },
            
            circleOptions: {
              strokeColor: '#00DB00',
              fillColor: 'green',
              fillOpacity: 0.05,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1
            }

          });
          drawingManager.setMap(map);
           google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event)
            {
              if (event.type === 'marker') console.log('Lat: ' + event.overlay.position.lat() + ', Long: ' + event.overlay.position.lng())
              else displayPolyLatLng(event.overlay.getPath().b); 
            });
          

          function displayPolyLatLng(pointArray)
          {debugger
            
              var result=" ";
              for (var i = 0; i < pointArray.length; i++) 
              {
                  result +='<b>Lat: ' + pointArray[i].lat() + ', Long: ' + pointArray[i].lng()+ '</b><br/>';
              }
              $('#info').html(result); 

              /*var lastEl = pointArray[pointArray.length-1];
              alert(lastEl)
              if(lastEl.length>1){
              undo_redo.push(lastEl.pop());
              } */    
          }
      }
      function removeLine(){
        polylines.remove(polylines.size() - 1)
      }