JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&amp;ext=.js"></script>
<canvas id="myCanvas" width="500" height="400"></canvas>
<div id="map_canvas"></div>

CSS

html, body, {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
#map_canvas {
    height: 400px;
    width: 500px;
}

JavaScript

var geocoder;
var map;
var overlay;
var shapes = [];


function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    overlay = new google.maps.OverlayView();
    overlay.draw = function () {};
    overlay.setMap(map);
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.POLYLINE]
        }
    });
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
        if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
            if (drawingManager.getDrawingMode()) {
                drawingManager.setDrawingMode(null);
            }
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            var polyline = event.overlay;
            shapes.push(polyline);
            context.beginPath();
            for (var i = 0; i < polyline.getPath().getLength(); i++) {
                var point = overlay.getProjection().fromLatLngToContainerPixel(polyline.getPath().getAt(i));
                if (i == 0) {
                    context.moveTo(point.x, point.y);
                } else {
                    context.lineTo(point.x, point.y);
                }
            }
            context.stroke();
        }
    });
    drawingManager.setMap(map);
    google.maps.event.addListener(drawingManager, "drawingmode_changed", function () {
        if (drawingManager.getDrawingMode() != null) {
            for (var i = 0; i < shapes.length; i++) {
               ...