How to change options with setOptions in DirectionsRenderer
<p>I'm changing options in a Google maps <a href="https://developers.google.com/maps/documentation/javascript/reference#DirectionsRenderer" rel="nofollow"><code>DirectionsRenderer</code></a> using <code>setOptions</code>. I can toggle the <code>draggable</code> option by just using <code>setOptions</code> but in order to toggle <code>suppressPolylines</code> and <code>suppressMarkers</code> and render it on the map I need an extra <code>directionsDisplay.setMap(map);</code>.</p>

<p>Why? (uncomment the line <code>//directionsDisplay.setMap(map);</code> to see this behavior)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;

var pointA = new google.maps.LatLng(51.5, 0.13);
var pointB = new google.maps.LatLng(60.17, 24.94);

function initialize() {

  var rendererOptions = {
      map: map,
      draggable: true
    }
    // Instantiate a directions service.
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  // Create a map and center it on pointA.
  var mapOptions = {
    center: pointA
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
  var request = {
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      console.log("something went wrong: " + status);
    }
  });
};

function changeOption(el) {
  var options = {};
  options[el.id] = el.checked;
  directionsDisplay.setOptions(options);
  // without the next line suppressPolylines and suppressMarkers are not updated
  //directionsDisplay.setMap(map);
};

google.maps.event.addDomListener(window, 'load', initialize);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
  height: 280px;
  width: 50%;
}
section {
  width: 50%;
  float: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;

&lt;section id="map"&gt;&lt;/section&gt;
&lt;section&gt;

&lt;input type="checkbox" id="suppressPolylines" onclick="changeOption(this)"&gt;suppressPolylines 
&lt;p&gt;
&lt;input type="checkbox" id="draggable" onclick="changeOption(this)" checked&gt;draggable
&lt;p&gt;
&lt;input type="checkbox" id="suppressMarkers" onclick="changeOption(this)"&gt;suppressMarkers
&lt;/section&gt;</code></pre>
</div>
</div>
</p>