httemplate/view/directions.html

   1 %# the actual page
   2 <& /elements/header-popup.html, {
   3      title => '',#$name,
   4      head  => include('.head'),
   5      etc   => 'onload="initialize()"',
   6      nobr  => 1,
   7    }
   8 &>
   9
  10 <div id="directions_panel"></div>
  11 <div id="map_canvas"></div>
  12
  13 <%def .head>
  14 % my $lat = $cgi->param('lat');
  15 % my $lon = $cgi->param('lon');
  16 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  17
  18 <style type="text/css">
  19 html { height: 100% }
  20
  21 body { height: 100%; margin: 0px; padding: 0px }
  22
  23 #map_canvas {
  24   height: 100%;
  25   margin-right: 320px;
  26 }
  27
  28 #directions_panel {
  29   height: 100%;
  30   float: right;
  31   width: 310px;
  32   overflow: auto;
  33   font-size: 80%;
  34 }
  35
  36 @media print {
  37   #map_canvas { height: 500px; margin: 0; }
  38   #directions_panel { float: none; width: auto; }
  39 }
  40 </style>
  41
  42 <script type="text/javascript"
  43 src="https://maps.google.com/maps/api/js?v=3.4&sensor=false">
  44 </script>
  45
  46 <script type="text/javascript">
  47 var lengthLine=0;
  48 var map;
  49
  50 function show_route() {
  51   var panel = document.getElementById('directions_panel');
  52   var directionsService = new google.maps.DirectionsService;
  53   var directionsDisplay = new google.maps.DirectionsRenderer;
  54   directionsDisplay.setMap(map);
  55   directionsDisplay.setPanel(panel);
  56
  57   var directionsRequest = {
  58     origin: <%$origin |js_string%>,
  59     destination: <% $lat %>+","+<% $lon %>,
  60     travelMode: google.maps.TravelMode.DRIVING
  61   };
  62
  63   directionsService.route(directionsRequest, function(result, status) {
  64     if ( status == google.maps.DirectionsStatus.OK ) {
  65       directionsDisplay.setDirections(result);
  66     }
  67   });
  68 }
  69
  70 function initialize() {
  71   var myOptions = {
  72     zoom: 14,
  73     rotateControl: true,
  74     mapTypeId: google.maps.MapTypeId.ROADMAP
  75   };
  76
  77   map = new google.maps.Map(
  78     document.getElementById("map_canvas"),
  79     myOptions
  80   );
  81   map.setOptions( {rotateControl : true });
  82
  83   show_route();
  84 }
  85 </script>
  86 </%def>
  87 <%shared>
  88 my ($lat, $lon, $name, $origin);
  89 </%shared>
  90 <%init>
  91
  92 $name = $cgi->param('name');
  93
  94 $lat = $cgi->param('lat');
  95 $lon = $cgi->param('lon');
  96 $lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
  97 $lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
  98
  99 $origin = $cgi->param('origin') or die "no origin specified";
 100
 101 </%init>