JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIYgM-yjE-vuW9GsD9uBDAmWslv9KSMPE&amp;amp;sensor=false&amp;amp;libraries=drawing,weather"></script>
<h1>Click the map to place marker</h1>

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

<h1>Output - indicates the distance between clicked location and marker (nearest road)</h1>	
<div class="output">
	<label>Distance from road: </label><span class="distance"></span><label> meters</label>
</div>

CSS

body, html{
		color: black;
		display: block;
	}

	#map{
		display: block;
		width: 100%;
		height: 400px;
	}

	.output{
		display: block;
		width: 100%;
	}

JavaScript

var marker = null;
var roadMarker = null;
var geocoder = new google.maps.Geocoder();
var map;
var directionsService = new google.maps.DirectionsService();

$(document).ready(function(){
	
	var latlng = new google.maps.LatLng(54.97430382488778, -1.611546277999878);

    var mapOptions = {
        zoom: 22,
        center: latlng
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
	google.maps.event.addListener(map, 'click', function(event) {   	
		placeMarkers(event);
	});
	
});
	
function placeMarkers(e) {

	var markerImage = "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|FFFF00";	
	var roadMarkerImage ="https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin||FF0000|000000";

	if(marker !== null){
		marker.setMap(null);
	}

	marker = new google.maps.Marker({
		position: e.latLng,
		map: map,
		icon: markerImage
	});
	
	var request = {
        origin:e.latLng, 
        destination:e.latLng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
	  
	directionsService.route(request, function(response, status) {
        
		if (status == google.maps.DirectionsStatus.OK) {		
			
			if(roadMarker !== null){
				roadMarker.setMap(null);    
			}
			
			roadMarker = new google.maps.Marker({
				position: response.routes[0].legs[0].start_location,
				map: map,
				icon: roadMarkerImage
			});			
			
			var distance = getDistance(request.origin,            
                            response.routes[0].legs[0].steps[0].end_point);

			$(".output .distance").html(distance);
		
		}
    });  
}

var rad = function(x) {
  return x * Math.PI / 180;
};

var getDistance = function(p1, p2) {

    //trim up to 5 decimal places because it is at that point where the difference
    p1.lat = parseFloat(p1.lat().toFixed(5));
    p1.lng = parseFloat(p1.lng().toFixed(5));

    p2.lat = parseFloat(p2.lat().toFixed(5));
    p2.lng = parseFloat(p2.lng().toFixed(5));

    var R = 6378137; // Earth’s mean...