Clean google maps polylines - google-maps

Question

I am trying to clean up google maps polylines once I render other ones. It works with the markers but with the polylines they stayed. I check google maps api google maps api
and couldn't make it work. It looks for me I am doing something wrong in the order but I have tried many ways and I can't find the solution.
function addMarkers(markerPosition: any, id?: number) {
// Creating markers
const position = { lat: markerPosition._latitude, lng: markerPosition._longitude };
marker = map && new window.google.maps.Marker({
map,
position,
id,
});
// Add listener to markers
marker.addListener('click', () => {
dispatch(getStop(id));
});
// Creating poliLine route
pathToRender.push(position);
// Focus on the markers
loc = map && new window.google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(loc);
return markers.push(marker);
}
useEffect(() => {
setStopInfo(stop.stop);
// stop.stop.userName !== '' && setPopUp(stop.stop);
}, [stop]);
function setPolyLine(pathRout: any) {
routePath = new window.google.maps.Polyline({
path: pathToRender,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(pathRout);
}
function setMapOnAll(mapToRender: any) {
for (let i = 0; i < markers.length; i += 1) {
markers[i].setMap(mapToRender);
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function clearMarkers() {
setMapOnAll(null);
setPolyLine(null);
}
function markersAdministration(routeChoose: number) {
const route = showRoutes[routeChoose];
setMapConfig({ center: { lat: 40, lng: 10 }, zoom: 5, disableDefaultUI: false });
// Clear Markers
clearMarkers();
markers = [];
pathToRender = [];
// Add stops, destination and origin to the markers
addMarkers(route.origin.point);
route.stops && route.stops.map((routeStop: IStops) => addMarkers(routeStop.point, routeStop.id));
addMarkers(route.destination.point);
// Setting up markers and lines layers
setMapOnAll(map);
setPolyLine(map);
}
Thank you for the help.

Answer 1

I solve it, I don't know why it didn't work before but it is working now.
function setMapOnAll(mapToRender: any) {
// Create Markers
for (let i = 0; i < markers.length; i += 1) {
markers[i].setMap(mapToRender);
}
// Create Polyline
routePath = new window.google.maps.Polyline({
path: pathToRender,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(mapToRender);
// Map focus on Bounds
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function clearMarkers() {
routePath && routePath.setMap(null);
setMapOnAll(null);
}