title: How to create a polyline between the source and destination using google maps api
body: <p>I'm trying to show the path between the source and destination and also trying to move an icon in this given path. </p>
  
  <p>I was able to move an icon from the source and destination but the path is getting revealed only when the icon is moving. </p>
  
  <p>I want the whole path to be shown at the beginning itself.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Animated route&lt;/title&gt;
   &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;style&gt;
    html, body, #map {
     height: 100%;
     margin: 0px;
     padding: 0px
    }
   &lt;/style&gt;
   &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;libraries=geometry"&gt;&lt;/script&gt;
   &lt;script&gt;
          
    function initialize() {
     var map = new google.maps.Map(document.getElementById("map"), {
       center: {lat: 17.416483, lng: 78.513592},
       zoom: 13,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     
     getDirections(map);
    }
  
    function moveMarker(map, marker, latlng) {
     marker.setPosition(latlng);
     map.panTo(latlng);
    }
  
    function autoRefresh(map, pathCoords) {
     var i, route, marker;
     
     route = new google.maps.Polyline({
      path: [],
      geodesic : true,
      strokeColor: 'blue',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: false,
      map:map
     });
     
     marker=new google.maps.Marker({map:map, icon:"truck.png"});
  
     for (i = 0; i &lt; pathCoords.length; i++) {    
      setTimeout(function(coords) {
       route.getPath().push(coords);
       moveMarker(map, marker, coords);
      }, 2000 * i, pathCoords[i]);
     }
    }
    
    function getDirections(map) {
     var directionsService = new google.maps.DirectionsService();
     
     var start = new google.maps.LatLng(17.416483, 78.513592);
     var end = new google.maps.LatLng(17.424643, 78.645126);
              var marker = new google.maps.Marker({
            position:   end,
            map: map,
           
          });
                 var marker = new google.maps.Marker({
            position:  start ,
            map: map,
           icon:"http://maps.google.com/mapfiles/ms/icons/green-dot.png"
          });
  
  
     var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
     };
     directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
       autoRefresh(map, result.routes[0].overview_path);
      }
     });
    }
  
    google.maps.event.addDomListener(window, 'load', initialize);
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>