Click on your desired destination

Example: getting the user position with HTML5 Geolocation API, then using google maps to find a route to the desired clicked location.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
	<head>
		<style>
		#map-canvas {
			height:600px;
			width:900px;
		}
		</style>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

function initialize() {
		 		map = new google.maps.Map(document.getElementById('map-canvas'), {
					zoom: 14,
					center: {lat: 41, lng: -89.5}
				});

var directionService= new google.maps.DirectionsService();
				var directionsDisplay = new google.maps.DirectionsRenderer();

navigator.geolocation.getCurrentPosition(function (location) {
					var lng=location.coords.longitude;
					var lat=location.coords.latitude;
					map.setCenter({lat:lat, lng:lng});

var originMarker=new google.maps.Marker({position:{lat:lat, lng:lng}, 
										map:map,
										title:'This is your position'
										});

google.maps.event.addListener(map,'click',function(mouseEvent) {
						console.log('clicked on ',mouseEvent.latLng.lat(), mouseEvent.latLng.lng());
						var destinationMarker= new google.maps.Marker({	position:mouseEvent.latLng, 
												map:map,
												title:'This is your destination',
												draggable:true,
												clickable:true
											});

var request = {	origin: originMarker.getPosition(),
								destination: destinationMarker.getPosition(),
								travelMode: 'DRIVING',
						};
						getRoute(request);
					});

});
			}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
	</head>
	<body>
		<h4>Click on your desired destination</h4>
		<div id="map-canvas" width="900" height="600"></div>
	</body>
</html>

Modified http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false to a secure url

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false