javascript - Google maps alternative routes won't update

Question

I have created a directions map from one point to multiple specific point. When one change end point the map should update, and alternative routes should be shown on the right sidebar, with details under it. However, when I change end point it's not updating nicely, sometimes it just add alternative directions under "old" directions,sometimes alternatives are messed up, not really sure what the problem is, though I suspect that there might be a problem if theres's no alternative routes returned for the specific end point. Here's a preview of what I made so far:

jsbin.com/hoqebofice/edit?output  

Also in the end, I'd like to have map updated once alternative route is clicked from the right sidebar as well.

Answer 1

In your OnChangeHandler add this line:

 var onChangeHandler = function() {
      document.getElementById("setPanel").innerHTML = ""; // THIS ONE!
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };