How to clear previous routes from Direction Service and Direction Renderer?

[sahilnare]

My Environment

OS: Linux (ubuntu) Browser: Firefox Node --version: v17.9.0 React version: 18.2.0 @react-google-maps/api version: 2.12.1

In my web app, I have to constantly update the route to show the marker moving along a road

But after the marker has gone ahead, the DirectionRenderer shows the previous route too

Here's how I'm using the library:

Is there any way to clear the previous routes?

[tj-webdev]

Hello @sahilnare , I've been working with this package and faced the same issue. Actually, the problem is in react's re-rendering not in the package.

Main problem: No matter what you apply, When the first time component shows the direction line on map, it generates the route more than one time and overlaps them on each other. And when you pass null then it removes only one direction line and the other remains there.

How I figured out the problem: I noticed that when I try to clear out the map's direction line by passing null value to directionResponse, then, the line color gets a little brighter. Then, I inspected the DOM of the map and I noticed that re-rendering is generating the direction line div more than one time.

Solution that worked for me: I had build the react app by using npm run build and then ran the production build locally using serve package. Finally, the bug was gone!

You can go through my project for more clarity on how to change map routes: https://github.com/tj-webdev/cab-fare-predictor

[KavinduGD]

Hello @sahilnare , I've been working with this package and faced the same issue. Actually, the problem is in react's re-rendering not in the package.

Main problem: No matter what you apply, When the first time component shows the direction line on map, it generates the route more than one time and overlaps them on each other. And when you pass null then it removes only one direction line and the other remains there.

How I figured out the problem: I noticed that when I try to clear out the map's direction line by passing null value to directionResponse, then, the line color gets a little brighter. Then, I inspected the DOM of the map and I noticed that re-rendering is generating the direction line div more than one time.

Solution that worked for me: I had build the react app by using npm run build and then ran the production build locally using serve package. Finally, the bug was gone!

You can go through my project for more clarity on how to change map routes: https://github.com/tj-webdev/cab-fare-predictor

thank