Пользовательская полилиния с использованием API Google Maps Directions

Question

Я использую сервис маршрутов карт Google, чтобы показывать пользователю маршруты между двумя точками, которые пользователь ввел через поля ввода, и использую DirectionsRenderer для отображения направлений.Направления отображаются отлично, но я хочу отобразить пользовательскую полилинию (как на прикрепленном изображении) с черным штриховым цветом и белым заливкой, чтобы показать направления, а не по умолчанию.Пожалуйста, предложите лучший подход для достижения этой цели.

Я пытался добиться этого с помощью опции значков DirectionsRenderer.

Вот код или то же самое:

<script>
      var map;
      var directionsService, directionsDisplay;

      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 50.6072352, lng: 6.3027546},
          zoom: 8
        });
        var infowindow = new google.maps.InfoWindow;
        var lineSymbol = {
          path: 'm 0,0 0,1',
          strokeOpacity: 1,
          strokeWeight:1.5,
          strokeColor: '#58595b',
          scale: 1,
          rotation:0,
          anchor: {x:-2.5, y:0}
        };  
        var lineSymbol2 = {
          path: 'm 0,0 0,1',
          strokeOpacity: 1,
          strokeWeight:1.5,
          strokeColor: '#58595b',
          scale: 1,
          rotation:0,
          anchor: {x:2.5, y:0}
        };  
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer({
          polylineOptions: {
            strokeOpacity: 1,
            geodesic: true,
            icons: [{icon:lineSymbol, offset: '0', repeat:'0.5px'},
            {icon:lineSymbol2, offset: '0', repeat:'0.5px'}
            ],
            strokeColor:'white',
            strokeWeight: 5
          }
        });
        directionsDisplay.setMap(map);
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: 'DRIVING'
        };
        directionsService.route(request, function(result, status) {
          if (status == 'OK') {
            console.log(result);
            directionsDisplay.setDirections(result);
          }
        });
      }

    </script>

Я в некоторой степени могу добиться этого, как показано это скрипка , но линия не ясна и пересекается в некоторых точках.Я хочу показать полилинию, как показано на картах Google для направлений - с другим обводкой и цветом заливки.