httemplate/view/directions.html

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