Adding InfoWindow on Google directions route

Question

I am trying to add an InfoWindow to directions route. there are lots of examples out there for adding InfoWindow on an event listener on a marker.

But how can I move the InfoWindow to show on the actual planned route from one marker to another. Someone already tried to ask this question before but no response (InfoWindow on Directions Route).

Anyway I did a lot of googling and only found one question similar to this but than again there is no response to that.

I tried infowindow.open(map,this) on an event on marker in callback but it will open InfoWindow on marker position. Its just I want to show duration and distance similar like Google. Something like in the attached image

var infowindow2 = new google.maps.InfoWindow();
distanceService.getDistanceMatrix(distanceRequest, function (response, status) {
    if (status == "OK") {
      infowindow2.setContent(response.rows[0].elements[0].distance.text + "<br>" + response.rows[0].elements[0].duration.text + " ")
    }
    else {
      alert("Error: " + status)
    }
  })
infowindow2.open(map, this);

Answer 1

You can use overview_path array to find the center point of the path. And then set it as infowindow position.

var center_point = response.routes[0].overview_path.length/2;

var infowindow = new google.maps.InfoWindow();
infowindow.setContent(response.routes[0].legs[0].distance.text + "<br>" + response.routes[0].legs[0].duration.text + " ");
infowindow.setPosition(response.routes[0].overview_path[center_point|0]);
infowindow.open(map);

Answer 2

To find a position on a route and put an infoWindow there, parse the route (the details are described in the documentation). Get a location along the route and call the setPosition method of your infowindow with that position.

function calcRoute(start, end) {
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var step = 1;
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " ");
      infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location);
      infowindow2.open(map);
    }
  });
}

If you really need the midpoint of the route, see Midpoint of route in google maps

proof of concept fiddle

code snippet:

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

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);

  var mapOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute("67 The Windmill Hill, Allesley, Coventry CV5 9FR, UK", "26 Rosaville Crescent, Allesley, Coventry CV5 9BP, UK");
}

function calcRoute(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var step = Math.floor(response.routes[0].legs[0].steps.length / 2);
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " ");
      infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location);
      infowindow2.open(map);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>