JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<body id="body">
    
<form action="showmap1.php" method="post">
    From: <input type="text" name="origin" id="origin" size="30" />&nbsp; </br>
To:<input type="text" name="destination" id="destination" size="30" />
<input type="button" value="Search" id="search"/>
<input type="button" value="Reset" id="reset"/><br />
<div id="googleMap"></div>
<div id="textDirection"></div>
</form>
</body>

CSS

#textDirection{
width: 40%;
height: 60%;
float: right;
overflow-y: auto;
margin-top: 1%;
}

#googleMap{
width : 50%;
height : 60%;
top: 5%;
position : absolute;
margin-left: 5px;
    display: none;
}

JavaScript

var directionsDisplay;
var directionsService;
var map;
var mapProp;

$(document).ready(function(){
    initialize();

    $("#search").click(function(){
        showMap();
    });
    
    $("#reset").click(function(){
        resetMap();
    });
});

function initialize()
{    $("#googleMap").hide();
    directionsDisplay= new google.maps.DirectionsRenderer();
    directionsService = new google.maps.DirectionsService();
    						directionsDisplay.setPanel(document.getElementById('textDirection'));
    mapProp = 
    {
        zoom: 7,
        center: {lat: 62, lng: -110.0},
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

function showMap() 
{
    google.maps.event.addListener(map, "idle", function(){
		var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
	});	
    
    map.setZoom( map.getZoom() - 1 );
    map.setZoom( map.getZoom() + 1 );

    directionsDisplay.setMap(map);
    var start = document.getElementById('origin').value;
    var end = document.getElementById('destination').value;
    var directionsRequest = 
    {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    }

    directionsService.route(directionsRequest, function(response, status)
    {
        if(status === google.maps.DirectionsStatus.OK)
        {  
            
 			$("#googleMap").show();
    		$("#textDirection").show();
directionsDisplay.setDirections(response);
        }
        else
        {
            $("#googleMap").hide();
    		$("#textDirection").hide();
            alert('Cannot');
        }
    });
}

function resetMap()
{
    document.getElementById("origin").value = '';
    document.getElementById("destination").value = '';
    $("#googleMap").hide();
    $("#textDirection").hide();
}