How to remove default A B markers on google maps route direction

Question

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

var startMarker = new google.maps.Marker({ position: start, map: map, icon: 'start.png' });
var stopMarker = new google.maps.Marker({ position: stop, map: map, icon: 'stop.png' });

directionsDisplay.setMap(map);

var request = {
 origin: start, 
 destination: stop,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};

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

Hi, this script shows route from start point to stop point and i use custom icons, but defaults green A and B also appear. Question is how do i remove default A and B markers so i will see only my custom ones ?

Possible duplicate of [Removing Directions markers from the Google Maps API V3](https://stackoverflow.com/questions/2932416/removing-directions-markers-from-the-google-maps-api-v3) — SphynxTech, Aug 13 '17 at 05:57

score 99 · Accepted Answer · answered Jul 16 '10 at 11:10

99

Try using the suppressMarkers option on the DirectionsRenderer to prevent the markers on the route from being displayed. This should leave the markers that you have added directly to the map in place but not show those associated with the route.

directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true } );

answered Jul 16 '10 at 11:10

tvanfosson

524,688
99
697
795

Thanks alot for reply, could u help me with setting stroke color ? By default its bold fiolet, but i want normal red i tried directionsDisplay.polylineOptions( { strokeColor: '#000000' } ); but this dont work – frytaz Aug 06 '10 at 10:55
9

`var directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions:{strokeColor:"#4a4a4a",strokeWeight:5}, suppressMarkers:true });` – Mladen Janjetovic Aug 06 '15 at 15:47
Excellent news! And it works! I start having millions of problems because you can't handle those 2 points - events and infoWindow. So, I supress them, draw new markers on these 2 tail positions, change the icon image for the same as they have and... et voilá! Now I have ful control on "points" A and "B". Thank you @tvanfosson – Pedro Ferreira Oct 24 '16 at 02:09
1

@tvanfosson but if suppressMarkers is true, then dragging feature becomes unstable. Can you see my post - https://stackoverflow.com/q/45769485/1513701 – Mukesh Sakre Aug 20 '17 at 09:10

score 5 · Answer 2 · answered Mar 05 '15 at 06:28

5

directionsDisplay.setOptions({
polylineOptions: {
            strokeWeight: 4,
            strokeOpacity: 1,
            strokeColor:  'red' 
        }
});

answered Mar 05 '15 at 06:28

Vaiman Hunor

404
1
4
12

score 1 · Answer 3 · answered Jun 18 '20 at 08:25

1

map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
directionsRenderer.setMap(map); 
directionsRenderer.setOptions( { suppressMarkers: true } );

answered Jun 18 '20 at 08:25

Ravikiran

512
3
14

How to remove default A B markers on google maps route direction

3 Answers3

Linked