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       var errmsg = ('<P STYLE="color: red;">Directions lookup failed with the following error: '+status+'</P>');
  66       if (status == 'REQUEST_DENIED') {
  67         errmsg = errmsg + <% include('/elements/google_maps_api_key.html' ) |js_string%>;
  68       }
  69       document.body.innerHTML = errmsg;
  70     }
  71   });
  72 }
  73
  74 // function name specified by google maps api, special hook for auth errors
  75 function gm_authFailure () {
  76   document.body.innerHTML =
  77 <% include('/elements/google_maps_api_key.html', autherror => $apikey ) |js_string%>;
  78 }
  79
  80 function initialize() {
  81   var myOptions = {
  82     zoom: 14,
  83     rotateControl: true,
  84     mapTypeId: google.maps.MapTypeId.ROADMAP
  85   };
  86
  87   map = new google.maps.Map(
  88     document.getElementById("map_canvas"),
  89     myOptions
  90   );
  91   map.setOptions( {rotateControl : true });
  92
  93   show_route();
  94 }
  95 </script>
  96 </%def>
  97 <%shared>
  98 my ($lat, $lon, $name, $origin);
  99 my $conf = new FS::Conf;
 100 my $apikey = $conf->config('google_maps_api_key');
 101 </%shared>
 102 <%init>
 103
 104 $name = $cgi->param('name');
 105
 106 $lat = $cgi->param('lat');
 107 $lon = $cgi->param('lon');
 108 $lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
 109 $lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
 110
 111 $origin = $cgi->param('origin') or die "no origin specified";
 112
 113 </%init>