title: Clear directions on Google Map with VueJS
body: <p>I have the following code in my app:</p>
  
  <pre><code>createCargoRoute: function(cargo_id) {
      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();
      var storehouse = new google.maps.LatLng(53.243757, 50.269379);
      var cargo_orders = this.orders.filter(order =&gt; this.cargos[cargo_id]['orders_ids'].includes(order.id));
      var cargo_waypoints = cargo_orders.map(cargo_order =&gt; cargo_order['waypoint']);
  
      directionsDisplay.setMap(this.$refs.olkonmap.$mapObject);
  
      directionsService.route({
        origin: storehouse,
        destination: storehouse,
        travelMode: 'DRIVING',
        waypoints: cargo_waypoints,
        optimizeWaypoints: true
      }, function(result, status) {
        if(status == 'OK') {
          directionsDisplay.setDirections(result);
        }
      });
    },
  </code></pre>
  
  <p>It works, but when I call it second time to draw another route, the first route doesn't removes from map. I read that I need to call <code>directionsDisplay.setDirections(null)</code> to clear directions and it works, for example, if I add <code>setTimeout(function() { directionsDisplay.setDirections(null); }, 2000);</code>
  to <em>createCargoRoute</em> function.</p>
  
  <p>But if I add <code>directionsDisplay.setDirections(null);</code> before any actions in <em>createCargoRoute</em>, it has no effect at second call. I think, it may be due to new DirectionsRenderer object which instantiates every time I call the function. Any advice would be appreciated. Thank you!</p>