ASPForums.Net RSS Feed additions to the content that appears on ASPForums.Net(c) 2019 All rights reserved.Google Map API: Draw single route line on Map from start location to end location<p>Don't push the src point on to the path out of order (the directions service is asynchronous).</p> <p>Remove this line:</p> <pre class="brush: js">path.push(src);</pre> <p>And change the code to render each directions result as a separate polyline.</p> <p>And change the script for ROUTING like below. </p> <pre class="brush: js">//***********ROUTING****************// //Initialize the Direction Service var service = new google.maps.DirectionsService(); //Loop and Draw Path Route between the Points on MAP for (var i = 0; i &lt; lat_lng.length; i++) { if ((i + 1) &lt; lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { //Initialize the Path Array var path = new google.maps.MVCArray(); //Set the Path Stroke Color var poly = new google.maps.Polyline({ map: map, strokeColor: &#39;#4986E7&#39; }); poly.setPath(path); for (var i = 0, len = result.routes[0].overview_path.length; i &lt; len; i++) { path.push(result.routes[0].overview_path[i]); } } }); } } </pre> <p>Refer</p> <h1><a class="question-hyperlink" href="">draw different route line between multiple markers maps</a></h1>, 20 Mar 2018 00:39:31 GMT