httemplate/view/map.html

   1 <& /elements/header-popup.html, {
   2      title => '',#$name,
   3      head  => $head,
   4      etc   => 'onload="html_googlemaps_initialize()"',
   5      nobr  => 1,
   6    }
   7 &>
   8
   9 <% $map_div %>
  10
  11 <%init>
  12
  13 my $name = js_string( scalar($cgi->param('name')) );
  14
  15 my $point = [ map scalar($cgi->param($_)), qw( longitude latitude ) ];
  16
  17 my( $head, $map_div ) = onload_render(
  18   $name,
  19   map scalar($cgi->param($_)), qw( lat lon )
  20 );
  21
  22 #false laziness w/Mason.pm
  23 sub js_string {
  24     my $string = shift;
  25     $string =~ s/(['\\])/\\$1/g;
  26     $string =~ s/\r/\\r/g;
  27     $string =~ s/\n/\\n/g;
  28     $string = "'". $string. "'";
  29     return $string;
  30 }
  31
  32 #subroutines below derived from HTML::GoogleMapsV3, but without using
  33 #Geo::Coder::Google or GPS::Point
  34 sub onload_render
  35 {
  36 ##      my $self = shift;
  37         my( $name, $latitude, $longitude ) = @_;
  38
  39         #map_canvas { height: 100% }
  40
  41         my $header='
  42         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  43         <style type="text/css">
  44                 html { height: 100% }
  45                 body { height: 100%; margin: 0px; padding: 0px }
  46                 #map_canvas { height: 100% }
  47         </style>
  48         <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=panoramio,geometry&v=3.4&sensor=false">
  49         </script>
  50         <script type="text/javascript">
  51         var lengthLine=0;
  52         function html_googlemaps_initialize() {
  53     var latlng = new google.maps.LatLng(' .$latitude . ',' . $longitude . ');
  54     var myOptions = {
  55       zoom: 14,
  56       center: latlng,
  57       rotateControl: true,
  58       mapTypeId: google.maps.MapTypeId.ROADMAP
  59     };
  60
  61     map = new google.maps.Map(document.getElementById("map_canvas"),
  62         myOptions);
  63
  64     map.setOptions( {rotateControl : true });
  65
  66
  67         ';
  68
  69 ##our own hacked in code for displaying a marker at the center
  70 $header .= '
  71 var markerOptions = {
  72   map: map,
  73   position: latlng,
  74   title: '. $name. '
  75 };
  76 var marker = new google.maps.Marker(markerOptions);
  77 ';
  78
  79 ##      if( defined $self->{polyline} ) {
  80 ##              foreach my $polyline ( keys %{$self->{polyline}} ) {
  81 ##                      $header .= $self->{polyline}->{$polyline} . "\n";
  82 ##              }
  83 ##      }
  84
  85         $header .= '}
  86         </script>';
  87
  88
  89         #my $div = '<div id="map_canvas" style="width:80%; height:75%"></div>';
  90         my $div = '<div id="map_canvas" style="width:100%; height:100%"></div>';
  91
  92
  93         $header .= "<SCRIPT>
  94
  95         panoramioLayer = new google.maps.panoramio.PanoramioLayer();
  96
  97         function panoramioOn(){
  98                                                                 panoramioLayer.setMap(map);
  99         }
 100         function panoramioOff() {
 101                 panoramioLayer.setMap(null);
 102         }
 103
 104         function panoramioToggle() {
 105                 if( panoramioLayer.getMap() == null ) {
 106                         panoramioOn();
 107                 } else {
 108                         panoramioOff();
 109                 }
 110         }
 111
 112
 113
 114         </SCRIPT>";
 115
 116         return ($header,$div)
 117
 118 }
 119
 120 </%init>