+%# the actual page
<& /elements/header-popup.html, {
title => '',#$name,
- head => $head,
- etc => 'onload="html_googlemaps_initialize()"',
+ head => include('.head'),
+ etc => 'onload="initialize()"',
nobr => 1,
}
&>
-<% $map_div %>
+<div id="map_canvas"></div>
-<%init>
-
-my $name = js_string( scalar($cgi->param('name')) );
+<%def .head>
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-my $point = [ map scalar($cgi->param($_)), qw( longitude latitude ) ];
+<style type="text/css">
+html { height: 100% }
-my( $head, $map_div ) = onload_render(
- $name,
- map scalar($cgi->param($_)), qw( lat lon )
-);
-
-#false laziness w/Mason.pm
-sub js_string {
- my $string = shift;
- $string =~ s/(['\\])/\\$1/g;
- $string =~ s/\r/\\r/g;
- $string =~ s/\n/\\n/g;
- $string = "'". $string. "'";
- return $string;
-}
+body { height: 100%; margin: 0px; padding: 0px }
-#subroutines below derived from HTML::GoogleMapsV3, but without using
-#Geo::Coder::Google or GPS::Point
-sub onload_render
-{
-## my $self = shift;
- my( $name, $latitude, $longitude ) = @_;
+#map_canvas { height: 100%; }
- #map_canvas { height: 100% }
-
- my $header='
- <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% }
- </style>
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=panoramio,geometry&v=3.4&sensor=false">
- </script>
- <script type="text/javascript">
- var lengthLine=0;
- function html_googlemaps_initialize() {
- var latlng = new google.maps.LatLng(' .$latitude . ',' . $longitude . ');
- var myOptions = {
- zoom: 14,
- center: latlng,
- rotateControl: true,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- map = new google.maps.Map(document.getElementById("map_canvas"),
- myOptions);
-
- map.setOptions( {rotateControl : true });
-
+@media print { #map_canvas { height: 500px; margin: 0; } }
+</style>
- ';
+<script type="text/javascript"
+src="https://maps.google.com/maps/api/js?v=3.4&sensor=false">
+</script>
-##our own hacked in code for displaying a marker at the center
-$header .= '
-var markerOptions = {
- map: map,
- position: latlng,
- title: '. $name. '
-};
-var marker = new google.maps.Marker(markerOptions);
-';
+<script type="text/javascript">
+var lengthLine=0;
+var map;
-## if( defined $self->{polyline} ) {
-## foreach my $polyline ( keys %{$self->{polyline}} ) {
-## $header .= $self->{polyline}->{$polyline} . "\n";
-## }
-## }
-
- $header .= '}
- </script>';
-
-
- #my $div = '<div id="map_canvas" style="width:80%; height:75%"></div>';
- my $div = '<div id="map_canvas" style="width:100%; height:100%"></div>';
+function initialize() {
+ var latlng = new google.maps.LatLng(<%$lat%>, <%$lon%>);
+ var myOptions = {
+ center: latlng,
+ zoom: 14,
+ rotateControl: true,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ map = new google.maps.Map(
+ document.getElementById("map_canvas"),
+ myOptions
+ );
+ map.setOptions( {rotateControl : true });
- $header .= "<SCRIPT>
-
- panoramioLayer = new google.maps.panoramio.PanoramioLayer();
-
- function panoramioOn(){
- panoramioLayer.setMap(map);
- }
- function panoramioOff() {
- panoramioLayer.setMap(null);
- }
-
- function panoramioToggle() {
- if( panoramioLayer.getMap() == null ) {
- panoramioOn();
- } else {
- panoramioOff();
- }
- }
-
+ var markerOptions = {
+ map: map,
+ position: latlng,
+ title: <%$name |js_string%>
+ };
+ var marker = new google.maps.Marker(markerOptions);
+}
+</script>
+</%def>
+<%shared>
+my ($lat, $lon, $name);
+</%shared>
+<%init>
-
- </SCRIPT>";
+$name = $cgi->param('name');
- return ($header,$div)
-
-}
+$lat = $cgi->param('lat');
+$lon = $cgi->param('lon');
+$lat =~ /^-?\d+(\.\d+)?$/ or die "bad latitude: $lat";
+$lon =~ /^-?\d+(\.\d+)?$/ or die "bad longitude: $lat";
</%init>