title: How to draw a route between two markers in Google Maps API?
body: <p>I have a requirement where, onclick, I have to draw a route in between two markers when I select. I have successfully uploaded a KML file on Google MAPS API, so the markers are clearly visible on Google MAPS API.</p>
  
  <p>When I select a two markers onclick, there should be a route drawn between the selected markers. I was able to draw a static route between the two points but the line which was getting drawn was not following the route. Please guide.
  Also please find the code which I have tried. Thanks in advance.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Transit layer&lt;/title&gt;
  &lt;style&gt;
  html,body,#map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
  }
  &lt;/style&gt;
  &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"      type="text/css" /&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"   src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"&gt;&lt;/script&gt;
  &lt;script&gt; function initialize() 
  {   
      var myLatlng = new google.maps.LatLng(0, -180);   
      var mapOptions = 
          {     
              zoom: 13,     
              center: myLatlng,     
              mapTypeId: google.maps.MapTypeId.ROADMAP  
          }    
  
       var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);    
       var transitLayer = new google.maps.TransitLayer();   
       transitLayer.setMap(map); 
  
  
      var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
       geoXml.parse('kmload.kml'); 
       var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
       geoXml1.parse('lines.kml'); 
  
  
       var coordinates = [     
                             new google.maps.LatLng(18.9800, 73.1000),     
                             new google.maps.LatLng(19.0361, 73.0617)];  
  
       google.maps.event.addListener(map, "click", function (e) 
        {  
                   var trainpath = new google.maps.Polyline({     
                   path: coordinates,    
                   geodesic: true,     
                   strokeColor: '#FF0000',     
                   strokeOpacity: 1.0,     
                   strokeWeight: 2   
                   });    
                  trainpath.setMap(map);
        });
  
  
  
       }  
  google.maps.event.addDomListener(window, 'load', initialize); 
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>