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 }
  26
  27 #directions_panel {
  28   height: 100%;
  29   float: right;
  30   width: 310px;
  31   overflow: auto;
  32   font-size: 80%;
  33 }
  34
  35 @media print {
  36   #map_canvas { height: 500px; margin: 0; }
  37   #directions_panel { float: none; width: auto; }
  38 }
  39 </style>
  40
  41 <script type="text/javascript"
  42 src="https://maps.google.com/maps/api/js?v=3.4&sensor=false">
  43 </script>
  44
  45 <script type="text/javascript">
  46 var lengthLine=0;
  47 var map;
  48
  49 function show_route() {
  50   var panel = document.getElementById('directions_panel');
  51   var directionsService = new google.maps.DirectionsService;
  52   var directionsDisplay = new google.maps.DirectionsRenderer;
  53   directionsDisplay.setMap(map);
  54   directionsDisplay.setPanel(panel);
  55
  56   var directionsRequest = {
  57     origin: <%$origin |js_string%>,
  58     destination: <% $lat %>+","+<% $lon %>,
  59     travelMode: google.maps.TravelMode.DRIVING
  60   };
  61
  62   directionsService.route(directionsRequest, function(result, status) {
  63     if ( status == google.maps.DirectionsStatus.OK ) {
  64       directionsDisplay.setDirections(result);
  65     }
  66   });
  67 }
  68
  69 function initialize() {
  70   var myOptions = {
  71     zoom: 14,
  72     rotateControl: true,
  73     mapTypeId: google.maps.MapTypeId.ROADMAP
  74   };
  75
  76   map = new google.maps.Map(
  77     document.getElementById("map_canvas"),
  78     myOptions
  79   );
  80   map.setOptions( {rotateControl : true });
  81
  82   show_route();
  83 }
  84 </script>
  85 </%def>
  86 <%shared>
  87 my ($lat, $lon, $name, $origin);
  88 </%shared>
  89 <%init>
  90
  91 $name = $cgi->param('name');
  92
  93 $lat = $cgi->param('lat');
  94 $lon = $cgi->param('lon');
  95 $lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
  96 $lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
  97
  98 $origin = $cgi->param('origin') or die "no origin specified";
  99
 100 </%init>