summaryrefslogtreecommitdiff
path: root/httemplate/view/directions.html
diff options
context:
space:
mode:
Diffstat (limited to 'httemplate/view/directions.html')
-rw-r--r--httemplate/view/directions.html101
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>