JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
}

JavaScript

var origin = null;
var destination = null;
var waypoints = [];
var markers = [];
var polyline = new google.maps.Polyline();

var dir = [];

function addMarker(latlng) {
    polyline.setMap(null);
    var marker = (new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true
    }));
    markers.push(marker);
    google.maps.event.addListener(marker, 'dragend', function() {
        origin = null;
        destination = null;
        waypoints = [];
        for (var j = 0; j < markers.length; j++) {
            if (j == 0) {
                origin = markers[0].getPosition();
            } else if (j == markers.length - 1) {
                destination = markers[j].getPosition();
            } else if (markers.length > 2) {
                if (waypoints.length < 8) {
                    waypoints.push({
                        location: markers[j].getPosition(),
                        stopover: true
                    });
                } else {
                    //origin = markers[markers.length - 1].getPosition();
                }
            }
        }
        polyline.setMap(null);
        calcRoute();
    });
    return marker;
}

function calcRoute() {
    var directionsService = new google.maps.DirectionsService();
    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            if (dir.length > 0) {
                for (var i = 0; i < dir.length; i++) {
                    dir[i].setMap(map);
                }
            }
            var polyline = new google.maps.Polyline();
            for (var j = 0; j < response.routes.length; j++) {
                var route = response.routes[j];
                var legs = route.legs;
                for (i = 0; i < legs.length; i++) {
   ...