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);

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);

• javascript
• google-maps
• infowindow
• directions
• google-directions-api

• possible duplicate of Google Maps click event on route – geocodezip Commented Jun 4, 2015 at 16:52
• If you just want to open an infowindow on a point along the route (not on a click), all you need is a position to open it at. – geocodezip Commented Jun 4, 2015 at 16:55
• Hi, how do i locate the position of a point on route ? – kam Commented Jun 4, 2015 at 21:53
• parse the response from the directionsService. – geocodezip Commented Jun 4, 2015 at 21:54
• you mean something like this infowindow2.open(map, response); – kam Commented Jun 4, 2015 at 22:06

2 Answers 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

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);