Google Maps Marker: Need option for 'Get Directions'

Question

Rather straight forward question.

I have currently implemented the google map on my site. I have so far been able to edit what data is displayed on the marker and exactly how that data is styled.

I am stuck on one last point. I need to be able to give visitors the option to click 'Get Directions'. I have a link on the marker called "Directions". I would like for visitors to be able to click this it 'somehow' and provide them with directions. I'm not sure of the means or how this is accomplished. I've looked everywhere. Any help would be greatly appreciated. I have included a screen shot of my marker.

Screenshot of marker/map http://postimg.org/image/t5v5hy7yj/

Also, when answering, treat me as someone who knows only the basics of what was required to do this so far. Thanks!

EDIT *

I have edited it so that when they hit the 'directions' link it takes the Google map search command and places inside it what I command it to from the mysql database. They would still need to click directions one more time at the now google result page to get directions. I need a more direct way of doing this! =)

  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var type = markers[i].getAttribute("type");
      var address = markers[i].getAttribute("address");
      var city = markers[i].getAttribute("city");
      var state = markers[i].getAttribute("state");
      var zip = markers[i].getAttribute("zip");
      var phone = markers[i].getAttribute("phone");
      var url = markers[i].getAttribute("url");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = 
      '<a href="' + url + '" target="blank">' + name + '</a>' +
      '</a><br/><br/>' + address +
      '<br>' + city + ' ' + state + ' ' + zip +
      '<br/>' + phone + 
      '<hr style="border: none; height: 1px; color: blue; background: grey;"/>' +
      '<a href="https://maps.google.com/maps?q='+ address + ' ' + city + ' ' + state + ' ' + zip + '" target="blank"><u>Directions</u></a> ' + ' <a href="#"><u>Write a Review</u></a> ' + ' <a href="#"><u>more</u></a>' +
      '<hr style="border: none; height: 1px; color: blue; background: grey;"/>' +
      '<?php echo $ads ?>';
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

Answer 1

In the HTML string for the info window, add an onclick parameter that calls a javascript function like this: showDirections(" + address + "," + city + "," + state + "," + ")

This link should help you create the function to show directions: https://developers.google.com/maps/documentation/javascript/examples/directions-simple