<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>{{PRG_NAME}} Routenplannung</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" content="text/html; charset=utf-8"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="https://maps.google.com/maps?file=api&v=3&key={{GOOGLE_API_KEY}}"
      type="text/javascript"></script>
    <script type="text/javascript"> 

    var map;
    var directionsPanel;
    var directions;

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMenuMapTypeControl());
      map.addControl(new GScaleControl());
      map.addMapType(G_PHYSICAL_MAP);

      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load("{{MAP_ROUTE}}");
    }


    function click (e) {
     if (!e) e = window.event;
     if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
      if (window.opera)
       window.alert("Sorry: Diese Funktion ist deaktiviert.");
       return false;
     }
    }


    if (document.layers) document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = click;
    document.oncontextmenu = click;

    </script>
  </head>

  <body onload="initialize()">
    <div id="route" style="width: 25%; height:100%; float:left; border; 1px solid black;"></div>
    <div id="map_canvas" style="width: 70%; height:{{MAP_WEB_HEIGHT}}px; float:right; border: 1px solid black;"></div>
    <br/>
  </body>
</html>
