Hide polyline from A to B using in Google Map api v3

Question

I am displaying google map with code below, I want to hide Polyline between A to B. All answers on google talk about creating an array and then doing array.setmap(null

Answer 1

If you want to render the directions but hide the polyline, use the DirectionsRendererOptions suppressPolylines.

function initialize() {

    var rendererOptions = {
        suppressPolylines: true,
        map: map,
        draggable: true               
    }
    // Instantiate a directions service.
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Answer 2

As shown in the demo below, you can remove polylines by two means:

• setting the option suppressPolylines to true in directionsDisplay, your google.maps.DirectionsRenderer by using

  directionsDisplay.setOptions({
          suppressPolylines: true
        });
  

  This will preserve the start- and end-point markers.

  The method setOptions(options:DirectionsRendererOptions) changes the options settings of DirectionsRenderer after initialization.

• use directionsDisplay.setMap(null); to remove all directions rendering, but this includes markers, so if you do that you will need to add extra markers to the map.

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

var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);

function initialize() {

  var rendererOptions = {
      map: map,
      draggable: true
    }
    // Instantiate a directions service.
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  // Create a map and center it on islamabad.
  var islamabad = new google.maps.LatLng(33.7167, 73.0667);
  var mapOptions = {
    zoom: 13,
    center: islamabad
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
  var start = pointA;
  var end = pointB;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
};

function removeRoute() {
  directionsDisplay.setOptions({
    suppressPolylines: true
  });
  // this "refreshes" the renderer
  directionsDisplay.setMap(map);
};

function removeRouteNull() {
  directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 280px;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>

Answer 3

If you refer to this answer: Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions you should see what you're looking for.

You do not need to use an array as you're implementing the directionsRenderer object. If you declare this globally (Edit Which I now see you have already) (so that you only have one instance at any given time) then you can simply use directionsDisplay.setMap(null) to remove previous directions rendered.

If you want to render the markers from the response but hide the polyline I suppose the simplest (but I would imagine by no means cleanest) way would be to simply alter the opacity on the polyline object:

var myPolylineOptions = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.00001,
    strokeWeight: 0
});

And then assign it to your renderer:

directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: myPolylineOptions});