JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

JavaScript

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(10.066611095611856,-69.33721108996582),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);


var drawingManager = new google.maps.drawing.DrawingManager({
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
      },
      rectangleOptions: {
          fillColor: '#0011aa',
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: false,
          editable: true,
          zIndex: 1
        }
});

drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
        /* DOES NOT WORK */
        google.maps.event.addListener(rectangle, 'click', function() {
            console.log(rectangle);
        });
  });
}