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" src="https://maps.google.com/maps/api/js?v=3<% $apikey ? '&key='.$apikey : '' %>">
  42 </script>
  43
  44 <script type="text/javascript">
  45 var lengthLine=0;
  46 var map;
  47
  48 function show_route() {
  49   var panel = document.getElementById('directions_panel');
  50   var directionsService = new google.maps.DirectionsService;
  51   var directionsDisplay = new google.maps.DirectionsRenderer;
  52   directionsDisplay.setMap(map);
  53   directionsDisplay.setPanel(panel);
  54
  55   var directionsRequest = {
  56     origin: <%$origin |js_string%>,
  57     destination: <% $lat %>+","+<% $lon %>,
  58     travelMode: google.maps.TravelMode.DRIVING
  59   };
  60
  61   directionsService.route(directionsRequest, function(result, status) {
  62     if ( status == google.maps.DirectionsStatus.OK ) {
  63       directionsDisplay.setDirections(result);
  64     } else {
  65       document.body.innerHTML = ('<P STYLE="color: red;">Directions lookup failed with the following error: '+status+'</P>');
  66     }
  67   });
  68 }
  69
  70 // function name specified by google maps api, special hook for auth errors
  71 function gm_authFailure () {
  72   document.body.innerHTML =
  73 <% include('/elements/google_maps_api_key.html', autherror => $apikey ) |js_string%>;
  74 }
  75
  76 function initialize() {
  77   var myOptions = {
  78     zoom: 14,
  79     rotateControl: true,
  80     mapTypeId: google.maps.MapTypeId.ROADMAP
  81   };
  82
  83   map = new google.maps.Map(
  84     document.getElementById("map_canvas"),
  85     myOptions
  86   );
  87   map.setOptions( {rotateControl : true });
  88
  89   show_route();
  90 }
  91 </script>
  92 </%def>
  93 <%shared>
  94 my ($lat, $lon, $name, $origin);
  95 my $conf = new FS::Conf;
  96 my $apikey = $conf->config('google_maps_api_key');
  97 </%shared>
  98 <%init>
  99
 100 $name = $cgi->param('name');
 101
 102 $lat = $cgi->param('lat');
 103 $lon = $cgi->param('lon');
 104 $lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
 105 $lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
 106
 107 $origin = $cgi->param('origin') or die "no origin specified";
 108
 109 </%init>