Adding an InfoWindow Route to Google

Question

I am trying to add InfoWindow to a route route. There are many examples for adding InfoWindow to a marker event listener.

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

In any case, I did a lot of search queries and found only one question similar to this question, but again there is no answer to it.

I tried infowindow.open(map,this) in the marker event in the callback, but it will open InfoWindow at the marker position. I just want to show the duration and distance, like Google. Something like an 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

To find a position on a route and place an information window there, analyze the route ( details are described in the documentation ). Get the location along the route and call the setPosition method of your infowindow with this 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); } }); } 

proof of conceptual scripts

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