JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="digi-map"></div>
<hr>
<button id="direction-route">SHOW ROUTE</button>

CSS

#digi-map {
  width: 100%;
  height: 500px;
}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

var map;
var digiLocation = {
  "lat": "51.597336",
  "long": "-0.109035"
};
var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long);

$(document).ready(function() {
  $("#direction-route").click(function(event) {
    event.preventDefault();
    var locationStart = "turnpike lane"
    calcRoute(locationStart)
  });
  var laLatLng;
  initialize();
});
// Set pointer at the middle while resize
google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
});

function calcRoute(locationStart) {
  var request = {
    origin: locationStart,
    destination: new google.maps.LatLng(digiLocation.lat, digiLocation.long),
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function initialize() {
  var myOptions = {
    scrollwheel: false,
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "stylers": [{
        "saturation": -100
      }]
    }]
  };
  map = new google.maps.Map(document.getElementById('digi-map'), myOptions);
  marker = new google.maps.Marker({
    position: myLatlng,
    icon: 'img/digi-marker.png',
    map: map
  });
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);

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