JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

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

CSS

#map-canvas {
  height: 900px;
}

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

JavaScript

function initialize() {
   map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 14,
      center: new google.maps.LatLng(-23.53904560000000000 ,-46.58478809999997000)
    }),
      ctrl = document.createElement('code');
  
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);
  
  var polyline = [  {lat:-23.53104560000000000, lng:-46.58478809999997000},  {lat:-23.54066980000000000, lng:-46.58771720000004000},  {lat:-23.53790450000000000, lng:-46.58865820000000000},  {lat:-23.53224160000000000, lng:-46.58765240000002400},  {lat:-23.53006440000000000, lng:-46.58767799999998000},  {lat:-23.53104560000000000, lng:-46.58478809999997000}];  
  var polyOptions = {        strokeColor: "#f",        strokeOpacity: 1,        strokeWeight: 2,        map: map,        path: polyline  };
  var poly = new google.maps.Polyline(polyOptions);
 

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


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

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

  });
    
  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, 'mouseout', function (e) {
    ctrl.innerHTML = "poly mouseout";
    console.log("poly mouseout");
    this.setOptions({strokeOpacity: 1,strokeWeight: 4.5});
  });

}


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