JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map"></div>
http://www.geocodezip.com/v3_polyline_example_kmmarkers.html
http://maps.google.com/maps/api/js?sensor=true&libraries=drawing,geometry&.js

CSS

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

JavaScript

var poly;  
var map;  

  
function initMap() {  
 
  var lat_lng = {lat: 43.48672, lng: -116.42444};     
  map = new google.maps.Map(document.getElementById('map'), {      
    zoom: 6,      
    center: lat_lng,      
    mapTypeId: google.maps.MapTypeId.TERRAIN      
  });  
  
  poly = new google.maps.Polyline({  
    strokeColor: '#FF0000',  
    strokeOpacity: 1.0,  
    strokeWeight: 3 
  });  
  poly.setMap(map);  
  
  // Add a listener for the click event  
  map.addListener('click', addLatLng);
  
}  
  
// Add a new point to the Polyline.  
function addLatLng(event) {  
  var path = poly.getPath();    
  path.push(event.latLng);
   
  
  // Add a new marker at the new plotted point on the polyline.  
  var marker = new google.maps.Marker({  
    position: event.latLng,  
    title: '#' + path.getLength(),  
    map: map
    
    
  });
  map.addListener("click", (mapsMouseEvent) => {
    
   // console.log(JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2))
  });
 

  // the new path stored in an array
  myPathArray =  poly.getPath().getArray()
  console.log(myPathArray.position)
}  
google.maps.event.addDomListener(window, 'load', initMap);