JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<table>
    <tr>
        <td>
            <div id="map-canvas"></div>
        </td>
        <td>
            <div id="directions-panel"></div>
        </td>
    </tr>
</table>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
#map-canvas {
    height: 100%;
    width: 100%;
}
#directions-panel {
    width: 100%;
    height: 100%;
    position: relative;
}
table, tbody, tr {
    width: 100%;
    height: 100%;
}
td {
    width: 100%;
    height: 100%;
}
}

JavaScript

function calculate() {
        var request = {
            origin: origin,
            destination: destination,


            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    // global variables
    var origin = null;
    var destination = null;
    var infowindow = new google.maps.InfoWindow();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();

    function initialize() {
        // Create a simple map.
        features = [];
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 4,
            center: {
                lat: -28,
                lng: 137.883
            }
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));
        google.maps.event.addListener(map, 'click', function () {
            infowidow.close();
        });
        // process the loaded GeoJSON data.
        google.maps.event.addListener(map.data, 'addfeature', function (e) {
            if (e.feature.getGeometry().getType() === 'Point') {
                map.setCenter(e.feature.getGeometry().get());
                // set the origin to the first point
                if (!origin) origin = e.feature.getGeometry().get();
                // set the destination to the second point
                else if (!destination) {
                    destination = e.feature.getGeometry().get();
                    // calculate the directions once both origin and destination are set 
                    calculate();
                }
            }
        });
        map.data.addGeoJson(data);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    var data...