JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map-canvas"></div>
<ol id="panel"></ol>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel li:before{
        
        padding: 3px;
        display:block;
        color:#fff;
        font-weight:bold;
      } 
      #panel li:nth-child(1):before{
        content:'startLeg:DRIVING';
        background:red;
      } 
      #panel li:nth-child(2):before{
        content:'middleLeg:TRANSIT';
        background:blue;
      } 
      #panel li:nth-child(3):before{
        content:'endLeg:BICYCLING';
        background:yellow;
        color:#000;
      }

JavaScript

function initialize() {
    var goo         = google.maps,
        map         = new goo.Map(document.getElementById('map-canvas'),
                                  {
                                    center  : new goo.LatLng(52.52, 13.40),
                                    zoom    : 10
                                  }
                                 ),
        App         = { map               : map,
                        bounds            : new goo.LatLngBounds(),
                        directionsService : new goo.DirectionsService(),    
                        directionsDisplay1: new goo.DirectionsRenderer({
                                              map             : map,
                                              preserveViewport: true,
                                              suppressMarkers : true,
                                              polylineOptions : {strokeColor:'red'},
                                              panel           : document.getElementById('panel').appendChild(document.createElement('li'))}),
                        directionsDisplay2: new goo.DirectionsRenderer({
                                              map             : map,
                                              preserveViewport: true,
                                              suppressMarkers : true,
                                              polylineOptions : {strokeColor:'blue'},
                                              panel           : document.getElementById('panel').appendChild(document.createElement('li'))}),
                        directionsDisplay3: new goo.DirectionsRenderer({
                                              map             : map,
                                              preserveViewport: true,
                                              suppressMarkers : true,
                                              polylineOptions : {strokeColor:'yellow'},
                                             ...