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 % my $conf = new FS::Conf;
  42 % my $apikey = $conf->config('google_maps_api_key');
  43 <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&key=<% $apikey %>">
  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     } else {
  67       document.body.innerHTML = ('<P STYLE="color: red;">Directions lookup failed with the following error: '+status+'</P>');
  68     }
  69   });
  70 }
  71
  72 function initialize() {
  73   var myOptions = {
  74     zoom: 14,
  75     rotateControl: true,
  76     mapTypeId: google.maps.MapTypeId.ROADMAP
  77   };
  78
  79   map = new google.maps.Map(
  80     document.getElementById("map_canvas"),
  81     myOptions
  82   );
  83   map.setOptions( {rotateControl : true });
  84
  85   show_route();
  86 }
  87 </script>
  88 </%def>
  89 <%shared>
  90 my ($lat, $lon, $name, $origin);
  91 </%shared>
  92 <%init>
  93
  94 $name = $cgi->param('name');
  95
  96 $lat = $cgi->param('lat');
  97 $lon = $cgi->param('lon');
  98 $lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
  99 $lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
 100
 101 $origin = $cgi->param('origin') or die "no origin specified";
 102
 103 </%init>