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). can I hide polyline without using arrays. In other case, how should I use array to hide polyline using code below.

Edit: I need marker A and B to be shown

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;    
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 = document.getElementById('MainContent_txtFrom').value;
        var end = document.getElementById('MainContent_txtTo').value;
        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);
            }
        });
    }      
    google.maps.event.addDomListener(window, 'load', initialize);

You did everything right. You only need to call `directionsDisplay.setMap(null);` to remove the route. — MrUpsidown, Jan 30 '14 at 11:47
by writing ``directionsDisplay.setMap(null);`` map didn't render at all. It keeps showing center — Rahman, Jan 30 '14 at 11:59
Well at what point do you want to remove it? And where did you add the above code? — MrUpsidown, Jan 30 '14 at 12:00
I'm drawing map after user fills start and end locations textboxes, I want to show only A and B marker but not blue line between them. And I tried ``directionsDisplay.setMap(null);`` both before and fter ``directionsDisplay.setDirections(response);`` and also outside of the ``directionsService.route(...){...}`` block — Rahman, Jan 30 '14 at 12:06
Sorry but why would you need the Directions Service if you don't want to display a route? — MrUpsidown, Jan 30 '14 at 12:10
Because route specifies that user will go from this route. My requirement is to show that user has to go from A to B only, and he is not bound of any path/route. Means user can go from any possible route, not specified by map — Rahman, Jan 30 '14 at 12:13
Then just display 2 markers for A and B. I still don't see why you would need the Directions Service if it's just to display 2 points on a map. — MrUpsidown, Jan 30 '14 at 12:21

score 4 · Accepted Answer · answered Jan 30 '14 at 13:07

4

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);

answered Jan 30 '14 at 13:07

geocodezip

158,664
13
220
245

That's great. That's what I was searching for. This is the exact and simple answer of my question but as @MrUpsidown suggested that I don't need ``Directions Service`` just to show A and B markers and not route, so that's the better idea as well (explained for future questioners). – Rahman Jan 30 '14 at 13:26

score 1 · Answer 2 · answered May 03 '16 at 12:36

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>

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

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});

edited May 23 '17 at 10:28

Community

1
1

answered Jan 30 '14 at 11:41

ChrisSwires

2,713
1
15
28

by writing ``directionsDisplay.setMap(null);`` map didn't render at all. It keeps showing center – Rahman Jan 30 '14 at 11:59
By the way I don't have issue of rendering previous directions – Rahman Jan 30 '14 at 12:00
Do you just want to hide the polyline then? But keep the start finish point etc? – ChrisSwires Jan 30 '14 at 12:02
1

I think that should accomplish what you're looking for, but may not be the cleanest solution. – ChrisSwires Jan 30 '14 at 12:06

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

3 Answers3

Linked