Skip to content Skip to sidebar Skip to footer

Google Maps - Hide Destination Marker

I am trying to display some hit markers on google maps, and display a route from start to finish. I've got the route displaying, but my origin and destination have the exact same

Solution 1:

The DirectionsRendererOptions has a suppressMarkers property.

This will hide both origin and destination markers.

You can then simply add your own marker at the origin coordinates. An example based on the code you posted:

if ((request.origin.lat == request.destination.lat) && (request.origin.lng == request.destination.lng)) {

  // Code to hide destination markervar rendererOptions = {
    suppressMarkers: true,
  };

  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(request.origin.lat, request.origin.lng),
    map: map
  });

} else {

  var directionsDisplay = new google.maps.DirectionsRenderer();
}

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

You didn't post your complete code, so the above implies that you remove your (not included) initialization of var directionsDisplay = new google.maps.DirectionsRenderer();

Post a Comment for "Google Maps - Hide Destination Marker"