JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 400px; height: 300px; float:left;"></div>
<div id="directions" style="width: 300px; height: 300px; float:left;border:1px dotted #ccc;overflow:auto;color:#717171;font:13px Arial"></div>
<script>
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(-33.917, 18.417)
    });

    var directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);
    directionsRenderer.setPanel(document.getElementById('directions'));

    var directionsService = new google.maps.DirectionsService();
    var request = {
      origin: "Cape Town, South Africa",
      destination: "Tableview, South Africa",

      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.DirectionsUnitSystem.METRIC,
      provideRouteAlternatives :true
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsRenderer.setDirections(response);
      } else {
        alert('Error: ' + status);
      }
    });
</script>

CSS

#directions .adp-listinfo {
    padding: 10px;
    display: block;
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
}
#directions table.adp-directions tr td {
    padding: 10px;
}
#directions .adp-text {
    padding: 10px;
}