JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<div style="width: 100%;" id="mapDiv">
    <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
    <div id="panel" style="width: 30%; float: left;margin:0px;"></div> 
</div>

JavaScript

var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
               zoom:7,
               mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: 'Pune', 
       destination: 'Lonavala',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

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