Remove previous route from Google Maps

Question

Remove previous route from Google Maps

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

In a multi-location application, I have a button for calling a route between two points using the setDirection function, as inserted below.

I would like support to be able to remove a route traced earlier after clicking on another marker.

// Funções de roteamento

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function setDirection(destLat, destLng) {
directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions:{strokeColor:"#4a4a4a",strokeWeight:5}, suppressMarkers:true });
directionsDisplay.setMap(map);

var request = {
    origin: pos.lat + ',' + pos.lng,
    destination: destLat + ', ' + destLng,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function (result, status) {
    console.log(request);
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

return false;
}

Below I have inserted a function that shows the map, including the section where you have the button to "Trace the Route"

 // Recarrega marcadores
 function reloadMarkers() {
 var center = map.getCenter();
 setMapOnAll(null);
 map.setCenter(center);


downloadUrl(findUrl, pos, function (data) {
    var xml = data;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {

        var name = markers[i].getElementsByTagName("name")[0].firstChild.nodeValue;
        var address = markers[i].getElementsByTagName("address")[0].firstChild.nodeValue;
        var type = markers[i].getElementsByTagName("type")[0].firstChild.nodeValue;
        var point = new google.maps.LatLng(
                parseFloat(markers[i].getElementsByTagName("lat")[0].firstChild.nodeValue),
                parseFloat(markers[i].getElementsByTagName("lng")[0].firstChild.nodeValue));
        var html = "<b>" + name + "</b> <br/>" + address +
                '<br><a href="#" onclick="return setDirection(' + markers[i].getElementsByTagName("lat")[0].firstChild.nodeValue + ',' + markers[i].getElementsByTagName("lng")[0].firstChild.nodeValue + ');">Traçar Rota</a>';
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
    }
});

}

This is the button where I return the 'setDirection ()' function:

 <a href="#" onclick="return setDirection(' + markers[i].getElementsByTagName("lat")[0].firstChild.nodeValue + ',' + markers[i].getElementsByTagName("lng")[0].firstChild.nodeValue + ');">Traçar Rota</a>

javascript google-maps google-maps-api-3

asked by anonymous 07.11.2015 / 04:41

2 answers

Firebird C # singleton pattern How to format money with jade in node.js?

score 1 · Answer 1

1

Use the function:

directionsDisplay.setMap(null);

08.11.2015 / 18:13

score 1 · Answer 2

The setMap (null) that @Dian Carlos passed is correct, maybe you have not put it in the correct place. Home Try this:

var directionsDisplay = null;
var directionsService = new google.maps.DirectionsService();

function setDirection(destLat, destLng) {
    if(directionsDisplay != null){
        directionsDisplay.setMap(null);
    }

I just changed the part of your code that I think is relevant, the rest stays the same