JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANh0YzZG-vsBwun96VJTXO6OGqnjIpzCE"></script>

<h3>Directions between two points</h3>
<p>Start Point: <input id="start">
   End Point: <input id="end">
<button>Get Directions</button><p>

<div id="map"></div>
<div id="directions"></div>

CSS

#map {
    width: 500px;
    height: 250px;
}

#directions {
    width: 450px;
    margin-top: 10px;
    height: 300px;
    overflow: scroll;
    border: 1px solid red;
}

JavaScript

// global variables

var directionsDisplay;
var directionsService;
var map;

$("button").click(sendDirectionsRequest);

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

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsService = new google.maps.DirectionsService();

  var mapOptions = {
    zoom:8,
    center: new google.maps.LatLng(0,0)
  };
  
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  // connect directions to a div on the page to show text instructions
  directionsDisplay.setPanel(document.getElementById('directions'));
} 

function sendDirectionsRequest(){
  var start = $("#start").val();
  var end = $("#end").val();
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.WALKING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}