var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer()
  
  var myOptions = {
    zoom: 13,
    center: new google.maps.LatLng(51.20027,6.00519),
    disableDefaultUI: true,
    navigationControl: true,
    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"),
                                myOptions);

  var image = new google.maps.MarkerImage('/pics/logo_maps.png', 
                                          new google.maps.Size(155, 75), 
                                          new google.maps.Point(0,0),
                                          new google.maps.Point(45, 75));
  var myLatLng = new google.maps.LatLng(51.20027,6.00519);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
  StartLocation = document.getElementById('fromAddress').value;
  Country = document.getElementById('fromCountry').value;
  var start = StartLocation + ", " + Country; 
  var end = "Maasnielderweg  33, 6042 CX Roermond, Nederland";
  var request = {
      origin:start, 
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
  return false;
}