title: Google Maps API, Directions From Marker To Marker
body: <p>so I have a map with lots of markers plotted. I want to be able to right click a marker and select "start point", then right click another marker and select "destination point". </p>
  
  <p>I would then remove all markers and only show the two markers ive clicked with the directions drawn on the map.</p>
  
  <p>I have no idea where to begin here, i am new to jquery. here is my code so far
  I have stripped out non important code to make it as small as possible:</p>
  
  <pre><code>    window.onload = function () {
  
          var markerarray = new Array();
  
          var mapOptions = {
              center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
  
  
          var infoWindow = new google.maps.InfoWindow();
          var map = new google.maps.Map(document.getElementById("map-canvas"),      mapOptions);
          var image = 'marker.png';
  
          for (i = 0; i &lt; markers.length; i++) {
  
              var data = markers[i]
              var myLatlng = new google.maps.LatLng(data.lat, data.lng);
              var isCheckedD4 = $('#&lt;%= D4.ClientID %&gt;').is(':checked');
              var icon = "";
              var fred;
  
              if (isCheckedcat == true) {
                  switch (data.category) {
                      case 'A1':
                          if (isCheckedA1 == true) {
                              icon = "http://www.googlemapsmarkers.com/v1/A1/0066FF/FFFFFF/FF5050";
                              fred = true;
                          }
                          else {
                              icon = "";
                              fred = false;
                          }
                          break;                  
                            }
                           }
  
  
              var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: data.title,
  
                  icon: new google.maps.MarkerImage(icon),
                  visible: fred,
                  draggable: false,
                  animation: google.maps.Animation.DROP
              });
  
              markerarray.push(marker);
  
              (function (marker, data) {
                  var markernameprev;
                  google.maps.event.addListener(marker, "click", function (e) {
  
                      infoWindow.setContent(data.name);
                      infoWindow.open(map, marker);
  
                      for (var i = 0; i &lt; markerarray.length; i++) {
                          markerarray[i].setAnimation(null);
                      }
  
                      marker.setAnimation(google.maps.Animation.BOUNCE);
  
                  });
  
              })(marker, data);
          }
      }
  </code></pre>
  
  <p>Any help would be much appreciated. Thank you.</p>