Clever Geek Handbook

Hiding last direction marker with google maps api

I calculated a route with the same start and end point with api maps.

Since the start and end points are the same, the first marker is overlapped by the last marker. Now I only want to remove the last marker.

I only know how to hide everything:

directionsDisplay.suppressMarkers = true;

Is there a way to scroll through the markers and remove the latter?

this is the code i am using for directions:

function calcRoute(waypts) {
    var start = waypts[0].location;
    var end = waypts[0].location;


       var request = {
        origin:start,
        destination:end,
        waypoints:waypts,
        optimizeWaypoints: true,
        provideRouteAlternatives:false,
        travelMode:google.maps.TravelMode.DRIVING
       };

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

           directionsDisplay.suppressInfoWindows = true;
           directionsDisplay.suppressMarkers = true;
           directionsDisplay.setDirections(response);

           console.log(status);

    }else{
         alert('SATUS:'+response.status);

    }
 });
}
+3


source to share


1 answer


try it

In initialization

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

then



directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
    var start =route.legs[0].start_location;
    var end =route.legs[0].end_location;
    addMarker(end);

addMarker function

    function addMarker(pos){
var marker = new google.maps.Marker({
  position: pos, 
  map: map, 
  icon: 'images/your image'

}
)
}

I haven't tested this, but you should get an idea

+4


source






More articles:


All Articles