Google maps API v3.0 - Showing distance and estimated time above direction path

Question

I want my directions look like the one in the image I provided.

Here is my code, almost everything is from example on Google website.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var request = {
      origin: START, // Ill add both places later
      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);
setTimeout(function(){
  calcRoute();
}, 2000);
    </script>

PS. Is it possible to display "dotted" path for directions as you can see in the picture ?

Answer 1

You need to create a Symbol (SVG or SymbolPath), include it as in an IconSequence in the PolylineOptions which you finally pass to the DirectionsRenderer.

const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
};

const polylineDotted = {
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
};

const rendererOptions = {
    map: map,
    polylineOptions: polylineDotted
};

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

Working code snipped below.

function initialize() {

  const map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0,0)
  });
 
  const directionsService = new google.maps.DirectionsService();
  
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  const polylineDotted = {
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
  };

  const rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineDotted
  };

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

  const start = "Lafayette Avenue 212, New York City";
  const end = "Myrtle Avenue 11612, New York City";
  const method = 'WALKING';
  
  const request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

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

window.initialize = initialize;

#map-canvas {
  height: 180px;
}

<!-- Credits for this code example: @MrUpsidown https://stackoverflow.com/users/1238965/mrupsidown -->
<div id="map-canvas"></div>

<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize"></script>