remove a polyline with the same link

Question

I have a problem with Polylines google map api v3.

I draw a polyline when I click a link , as I delete or hide with the same link a polyline ?

Here is my code: HTML AND javascript

function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) {
    
        var start = new google.maps.LatLng(ltOrigen, lgOrigen);
        var end = new google.maps.LatLng(ltDestino, lgDestino);
    
        var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
        directionsDisplay.setMap(map); // map should be already initialized.
    
        var request = {
            origin : start,
            destination : end,
            travelMode : google.maps.TravelMode.DRIVING
        };
        var directionsService = new google.maps.DirectionsService(); 
              //var bounds = new google.maps.LatLngBounds();
    
        directionsService.route(request, function(response, status) {
            /*if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }*/
            if (status == google.maps.DirectionsStatus.OK) {
                                            var path = new google.maps.MVCArray();
                                            var poly = new google.maps.Polyline({
                                                map: map,
                                                strokeColor: '#F3443C'
                                            });
                                            for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) {
                                                path.push(response.routes[0].overview_path[i]);
                                            }
                                            poly.setPath(path);
                                            //map.fitBounds(bounds);
                                        }
        });
    }

<a href="mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a>

    

Answer 1

You need to keep a reference to the polyline in the global scope. If it has already been created, remove it from the map (if you want you can toggle it by re-adding it to the map when the link is clicked when it isn't shown.

proof of concept fiddle

code snippet:

var geocoder;
var map;
var poly;
var ltOrigen = 40.7127837,
  lgOrigen = -74.0059413,
  ltDestino = 40.735657,
  lgDestino = -74.1723667;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });;
}

function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) {
  if (poly && poly.setMap && poly.getMap && (poly.getMap() != null)) {
    poly.setMap(null);
    return;
  }
  var start = new google.maps.LatLng(ltOrigen, lgOrigen);
  var end = new google.maps.LatLng(ltDestino, lgDestino);

  var directionsDisplay = new google.maps.DirectionsRenderer(); // also, constructor can get "DirectionsRendererOptions" object
  directionsDisplay.setMap(map); // map should be already initialized.

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  //var bounds = new google.maps.LatLngBounds();

  directionsService.route(request, function(response, status) {
    /*if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }*/
    if (status == google.maps.DirectionsStatus.OK) {
      var path = new google.maps.MVCArray();
      poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
      });
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) {
        path.push(response.routes[0].overview_path[i]);
        bounds.extend(response.routes[0].overview_path[i]);
      }
      poly.setPath(path);
      map.fitBounds(bounds);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<a href="javascript:mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a>
<div id="map_canvas"></div>