google maps - How to turn off the Bicycling layer after it gets turned on by the DirectionsRenderer -

in the documentation on layers in google maps api, following stated:

the bicycling layer object renders layer of bike paths and/or bicycle-specific overlays common layer. layer returned default within directionsrenderer when requesting directions of travel mode bicycling.

how 1 turn off bicycling layer after got turned on directionsrenderer? want show biking route, don't want green lines of bicycling layer mess clarity of map.

is there way 'get' current bicycling layer, , turn off/unbind map way?

just disable display of bicyclinglayer directionsrenerer, per documentation directionsrendereroptions can suppress bicyclelayer using suppressbicyclinglayer option in directionsrendereroptions:

suppressbicyclinglayer | type: boolean | suppress rendering of bicyclinglayer when bicycling directions requested.

proof of concept fiddle

code snippet:

function initmap() {    var directionsservice = new google.maps.directionsservice;    var directionsdisplay = new google.maps.directionsrenderer({      suppressbicyclinglayer: true    });    var map = new google.maps.map(document.getelementbyid('map'), {      zoom: 7,      center: {        lat: 41.85,        lng: -87.65      }    });    directionsdisplay.setmap(map);      var onchangehandler = function() {      calculateanddisplayroute(directionsservice, directionsdisplay);    };    calculateanddisplayroute(directionsservice, directionsdisplay);  }    function calculateanddisplayroute(directionsservice, directionsdisplay) {    directionsservice.route({      origin: document.getelementbyid('start').value,      destination: document.getelementbyid('end').value,      travelmode: 'bicycling'    }, function(response, status) {      if (status === 'ok') {        directionsdisplay.setdirections(response);      } else {        window.alert('directions request failed due ' + status);      }    });  }

html,  body {    height: 100%;    margin: 0;    padding: 0;  }  #map {    height: 100%;  }  #floating-panel {    position: absolute;    top: 10px;    left: 25%;    z-index: 5;    background-color: #fff;    padding: 5px;    border: 1px solid #999;    text-align: center;    font-family: 'roboto', 'sans-serif';    line-height: 30px;    padding-left: 10px;  }

<div id="floating-panel">    <b>start: </b>    <input id="start" value="new york, ny" />    <br><b>end: </b>    <input id="end" value="newark, nj" />  </div>  <div id="map"></div>  <!-- replace value of key parameter own api key. -->  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initmap">  </script>