JSFiddle - React, Tailwind, and code Playground

by avgustre

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
 <div id="map"></div>

CSS

#map{
  width: 500px;
  height: 500px;
}

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 53.905551719718574, lng: 27.55868911743164},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var poly = new google.maps.Polyline({
                       map: map,
                       strokeWeight: 2,
                       strokeColor: 'rgb(1, 1, 1)',
                       editable: true,
                       path: []
  });
  
  var paths;
  
  google.maps.event.addListener(map, 'click', function(evt) {
    var paths = poly.getPath();
    var ll = new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng());
    paths.push(ll);
    poly.setPath(path);

  });
}
google.maps.event.addDomListener(window, "load", initMap);