title: Removing routes rendered on a Google Map
body: <p>I'm trying to do something that I gather has been done quite a few times before, although I'm having some difficulty accomplishing it.</p>
  
  <p>I have a webpage that displays three Google Maps.</p>
  
  <p>For each of these google maps, I have a text box that accepts a post code / zip code, and a "get directions" button.</p>
  
  <p>Clicking on each of these buttons uses the google.maps.DirectionsService object to display ONE set of directions in ONE panel centered at the bottom of the page.</p>
  
  <p>My issue arises when I try to find a new route by searching again. As you can see in the image below, both routes are rendered.</p>
  
  <p><img src="https://i.stack.imgur.com/iHy7T.jpg" alt="Two routes rendered on a map">
  <br/></p>
  
  <p>I have one marker at the end which is in a markers collection.</p>
  
  <p>I've read a few times now about how you can loop through this array and use marker.setMap(null) to clear this marker. </p>
  
  <p>However, I can't seem to clear the actual routes after each specific search. </p>
  
  <p>Has anybody had any problems with clearing markers from multiple maps? </p>
  
  <p>Do you have to totally reset the map in some way?</p>
  
  <p>If you have to clear markers, at what point in the lifecycle of the process should you do it so that your new journey appears after the search, but the old one is removed?</p>