diff options
Diffstat (limited to 'httemplate/view/directions.html')
-rw-r--r-- | httemplate/view/directions.html | 101 |
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> |