Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
    <meta charset='utf-8'>
    <title>Utvonal</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <style>
          #directions-panel {
            height: 100%;
            float: right;
            width: 390px;
            overflow: auto;
          }

          #map-canvas {
            margin-right: 400px;
          }

          #control {
            background: #fff;
            padding: 5px;
            font-size: 14px;
            font-family: Arial;
            border: 1px solid #ccc;
            box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
            display: none;
          }

          @media print {
            #map-canvas {
              height: 500px;
              margin: 0;
            }

            #directions-panel {
              float: none;
              width: auto;
            }
          }
        </style>

    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'></script>
    <script>
var map;
var directionsDisplay;
var directionsService;

function initialize() {
  directionsService = new google.maps.DirectionsService();

  var budapest = new google.maps.LatLng(47.4962, 19.0333);
  var mapOptions = {
    zoom: 10,
    center: budapest
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var rendererOptions = {
    map: map
  };
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

  calcRoute();

}
function calcRoute() {

  var request = {
      origin: 'Kistarcsa, Hrsz. 0260/48',
      waypoints: [
         {location:'Sárvár, Vadkert u. 1.', stopover:true},
         {location:'Kapuvár, Fürdő u. 42.', stopover:true}
],
      destination: 'Kistarcsa, Hrsz. 0260/48',
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };

  directionsService.route(request, function(response, status)
  {
    if (status == google.maps.DirectionsStatus.OK)
    {
      directionsDisplay.setDirections(response);
    } else {
        alert ('Hiba');
    }
  });
 }

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id='control'></div>
    <div id='directions-panel'></div>
    <div id='map-canvas'></div>
  </body>
</html>