$(document).ready(function(){
	$(".map_marker_form").live("submit",function(){
		var locatie=$(this).find("input[name='map_marker_route_locatie']").val();
		var adres=$(this).find("input[name='map_marker_route_adres']").val();

		$.fancybox("<div id=\"map_route\"><div id=\"map_route_map\"></div><div id=\"map_route_beschrijving\"></div></div>");
		
		var map_canvas  = document.getElementById("map_route_map");
		var directionsPanel  = document.getElementById("map_route_beschrijving");
		
		var map = new google.maps.Map(map_canvas, {
		  zoom: 12,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		 
		var directionsRenderer = new google.maps.DirectionsRenderer();
		directionsRenderer.setMap(map); 
		directionsRenderer.setPanel(directionsPanel);
		 
		var directionsService = new google.maps.DirectionsService();
		var request = {
		  origin: adres, 
		  destination: locatie,
		  travelMode: google.maps.DirectionsTravelMode.DRIVING,
		  unitSystem: google.maps.DirectionsUnitSystem.METRIC
		};
		directionsService.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsRenderer.setDirections(response);
		  } else {
			alert('Fout: ' + status);
		  }
		});
		
		return false;
	});
});