Eliminando rutas representadas en un mapa de Google

Question

Estoy tratando de hacer algo que creo que se ha hecho varias veces antes, aunque estoy teniendo algunas dificultades para lograrlo.

Tengo una página web que muestra tres Google Maps.

Para cada uno de estos mapas de Google, tengo un cuadro de texto que acepta un código postal/código postal y un botón "obtener indicaciones".

Al hacer clic en cada uno de estos botones se utiliza el objeto google.maps.DirectionsService para visualizar UN conjunto de instrucciones en UN panel centrado en la parte inferior de la página.

Mi problema surge cuando trato de encontrar una nueva ruta buscando de nuevo. Como puede ver en la imagen a continuación, ambas rutas se representan.

I tienen un marcador en el extremo que está en una colección marcadores.

He leído algunas veces acerca de cómo puede recorrer este conjunto y usar marker.setMap (null) para borrar este marcador.

Sin embargo, parece que no puedo borrar las rutas reales después de cada búsqueda específica.

¿Alguien ha tenido algún problema con borrar marcadores de varios mapas?

¿Tiene que reiniciar totalmente el mapa de alguna manera?

Si tiene que borrar los marcadores, ¿en qué punto del ciclo de vida del proceso debe hacerlo para que su nuevo viaje aparezca después de la búsqueda, pero el anterior se elimina?

Answer 1

Utilizo el mismo objeto google.maps.DirectionsService para los tres mapas de Google, y todos invocan el mismo método para calcular direcciones, pero transfieren su propio objeto de mapa como parámetro.

function calcRoute(startPoint, location_arr) { 
    // Create a renderer for directions and bind it to the map. 
    var map = location_arr[LOCATION_ARR_MAP_OBJECT]; 
    var rendererOptions = { 
    map: map 
} 

if(directionsDisplay != null) { 
    directionsDisplay.setMap(null); 
    directionsDisplay = null; 
} 

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

directionsDisplay.setMap(map); 

directionsDisplay.setPanel(document.getElementById("directionsPanel")); 

Lo esencial es que si directionsDisplay! = Null, que no sólo pasan nula a setMap, también anulamos todo el afterweards objeto, y me pareció que lo arregló.

Answer 2

No sé la respuesta .... más probable es que todo u necesidad de hacer es en función de las circunstancias:

// put the codes after direction service is declared or run directionsService // 

directionsDisplay.setMap(null); // clear direction from the map 
directionsDisplay.setPanel(null); // clear directionpanel from the map   
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching 
directionsDisplay.setMap(map); //this is to set up again 

Answer 3

Esta es la única pieza que necesita:

// Clear past routes 
    if (directionsDisplay != null) { 
     directionsDisplay.setMap(null); 
     directionsDisplay = null; 
    }