directions to customer address, #16585

1 files changed, 101 insertions, 0 deletions

diff --git a/httemplate/view/directions.html b/httemplate/view/directions.html
new file mode 100644
index 000000000..599d049c2
--- /dev/null
+++ b/httemplate/view/directions.html
@@ -0,0 +1,101 @@
+%# the actual page
+<& /elements/header-popup.html, {
+     title => '',#$name,
+     head  => include('.head'),
+     etc   => 'onload="initialize()"',
+     nobr  => 1,
+   }
+&>
+
+<div id="directions_panel"></div>
+<div id="map_canvas"></div>
+
+<%def .head>
+% my $lat = $cgi->param('lat');
+% my $lon = $cgi->param('lon');
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+<style type="text/css">
+html { height: 100% }
+
+body { height: 100%; margin: 0px; padding: 0px }
+
+#map_canvas {
+  height: 100%;
+  margin-right: 320px;
+}
+
+#directions_panel {
+  height: 100%;
+  float: right;
+  width: 310px;
+  overflow: auto;
+  font-size: 80%;
+}
+
+@media print {
+  #map_canvas { height: 500px; margin: 0; }
+  #directions_panel { float: none; width: auto; }
+}
+</style>
+
+<script type="text/javascript" 
+src="https://maps.google.com/maps/api/js?v=3.4&sensor=false">
+</script>
+
+<script type="text/javascript">
+var lengthLine=0;
+var map;
+
+function show_route() {
+  var panel = document.getElementById('directions_panel');
+  var directionsService = new google.maps.DirectionsService;
+  var directionsDisplay = new google.maps.DirectionsRenderer;
+  directionsDisplay.setMap(map);
+  directionsDisplay.setPanel(panel);
+
+  var directionsRequest = {
+    origin: <%$origin |js_string%>,
+    destination: <% $lat %>+","+<% $lon %>,
+    travelMode: google.maps.TravelMode.DRIVING
+  };
+
+  directionsService.route(directionsRequest, function(result, status) {
+    if ( status == google.maps.DirectionsStatus.OK ) {
+      directionsDisplay.setDirections(result);
+    }
+  });
+}
+
+function initialize() {
+  var myOptions = {
+    zoom: 14,
+    rotateControl: true,
+    mapTypeId: google.maps.MapTypeId.ROADMAP
+  };
+
+  map = new google.maps.Map(
+    document.getElementById("map_canvas"),
+    myOptions
+  );
+  map.setOptions( {rotateControl : true });
+
+  show_route();
+}
+</script>
+</%def>
+<%shared>
+my ($lat, $lon, $name, $origin);
+</%shared>
+<%init>
+
+$name = $cgi->param('name');
+
+$lat = $cgi->param('lat');
+$lon = $cgi->param('lon');
+$lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
+$lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
+
+$origin = $cgi->param('origin') or die "no origin specified";
+
+</%init>