Simple Map

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.32&callback=initMap&libraries=geometry" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */

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

code {
  background: #fff;
  padding: 2px;
  font-size: 1.5em;
  border: 1px solid #000;
  border-radius: 5px;
}

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: new google.maps.LatLng(-23.53904560000000000, -46.58478809999997000)
    });
  const ctrl = document.createElement('code');

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);

  const polyline = [{
    lat: -23.5310,
    lng: -46.5848
  }, {
    lat: -23.5407,
    lng: -46.5878
  }, {
    lat: -23.5379,
    lng: -46.5887
  }, {
    lat: -23.5322,
    lng: -46.5877
  }, {
    lat: -23.5301,
    lng: -46.5877
  }, {
    lat: -23.5310,
    lng: -46.5848
  }];
  const polyOptions = {
    strokeColor: "#f",
    strokeOpacity: 1,
    strokeWeight: 2,
    map: map,
    path: polyline
  };
  const poly = new google.maps.Polyline(polyOptions);


  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(-23.53904560000000000, -46.58478809999997000),
    map: map,
    draggable: true,
    title: 'Hello World!'
  });

  atribMove(poly, ctrl, marker);
}


function atribMove(polyLine, ctrl, marker) {

  google.maps.event.addListener(marker, 'dragstart', function() {
    ctrl.innerHTML = 'dragstart';
    console.log("dragstart");
  });

  google.maps.event.addListener(marker, 'drag', function(event) {
    if (google.maps.geometry.poly.isLocationOnEdge(marker.getPosition(), polyLine, 0.0000999)) {
    	ctrl.innerHTML = "drag ONPOLYLINE"
  	  console.log("drag ONPOLYLINE");
      polyLine.setOptions({
        strokeOpacity: 1,
        strokeWeight: 10, 
        strokeColor: "#f00"
      });
    } else {
	    ctrl.innerHTML = "drag";
  	  console.log("drag");
      polyLine.setOptions({
        strokeOpacity: 1,
        strokeWeight: 4.5
      });
    }
  });

  google.maps.event.addListener(polyLine, 'mouseover', function(e) {
    ctrl.innerHTML = "poly mouseover";
    console.log("poly mouseover");
    this.setOptions({
      strokeOpacity: 1,
      strokeWeight: 10
    });
  });

  google.maps.event.addListener(polyLine,...