title: google maps plot route between two points
body: <p>I have written this innocent javascript code, which lets the user create two markers and plot the route between them. It doesnt work, instead, it gives a weird error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'ya' of undefined
  </code></pre>
  
  <p>Can someone suggest me whats wrong here:</p>
  
  <pre><code>// called upon a click
  GEvent.addListener(map, "click", function(overlay,point) {
      if (isCreateHeadPoint) {
          // add the head marker
          headMarker = new GMarker(point,{icon:redIcon,title:'Head'});
          map.addOverlay(headMarker);
          isCreateHeadPoint = false;
      } else {
          // add the tail marker
          tailMarker = new GMarker(point,{icon:greenIcon,title:'Tail'});
          map.addOverlay(tailMarker);
          isCreateHeadPoint = true;
          // create a path from head to tail
          direction.load("from:" + headMarker.getPoint().lat()+ ", " + headMarker.getPoint().lng()+ " to:" + tailMarker.getPoint().lat() + "," + tailMarker.getPoint().lng(), { getPolyline: true, getSteps: true }); 
          // display the path
          map.addOverlay(direction.getPolyline());
      }
  });
  </code></pre>