Google Maps距离/持续时间标记和标签

Question

On this screenshot of Google Maps, you can see the Duration of the drive and the distance, for both the main route and the alternative one, and the textual labels for the destination (Knutsford Golf Club).

I'm using the Google Maps API and have added the route and alternate route but I'm unable to find anything in the documentation about these distance/duration markers and the textual labels.

Are they possible to recreate in any sensible way or are they something for only Google?

Answer 1

They are controlled by google by default. When you do a directions request, you can remove the markers by using supressMarkers property

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

Reference: Directions Renderer Options

Directions request does provide with all values for turn by turn navigation.

Additionally: You can add all the default markers of directionRenderer by yourself on the map, controlling the way in which you want.

directionsService = new google.maps.DirectionsService();
directionsService.route(request, function (response, status) {
   directionsDisplay = new google.maps.DirectionsRenderer(
  {
      suppressMarkers: true
  });

All the steps of the direction service can be found in directionsDisplay.directions.routes[0].legs[0].steps which gives the content of info windows and position of the markers as displayed on map.

You will have multiple routes , if available and multiple legs if there are waypoints present.

Do a console.log(directionsDisplay) and further explore the result object.