X-Git-Url: http://git.freeside.biz/gitweb/?a=blobdiff_plain;f=httemplate%2Fsearch%2Felements%2Fgmap.html;h=69fdc5a09f8af737f7565f9dcb3740e070fe288c;hb=7b0bbc4117a7959b9f7b7b2cf999b8188ba34160;hp=8b070ebf932a2d3763c3ab6c224b7a9ef8bf1576;hpb=5befe347dfac36159ab2f68a1487111eb97996dc;p=freeside.git

diff --git a/httemplate/search/elements/gmap.html b/httemplate/search/elements/gmap.html
index 8b070ebf9..69fdc5a09 100644
--- a/httemplate/search/elements/gmap.html
+++ b/httemplate/search/elements/gmap.html
@@ -1,5 +1,6 @@
 <%args>
 @features
+@overlays
 </%args>
 <%doc>
 Generic Google Maps front end.
@@ -24,10 +25,21 @@ Generic Google Maps front end.
       }
     }, # end of feature
   ],
+  overlays => [
+    { url => 'https://localhost/freeside/view/sector_map-png.html?102',
+      west  => -130.0,
+      east  => -128.0,
+      south => 10.0,
+      north => 12.0,
+    }, # make a ground overlay
+  ],
 &>
 
 </%doc>
 <%init>
+
+my $apikey = FS::Conf->new->config('google_maps_api_key');
+
 foreach (@features) {
   $_->{type} = 'Feature';
   # any other per-feature massaging can go here
@@ -48,12 +60,13 @@ body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 100%; }
 </style>
 
-<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
+<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=<% $apikey %>">
 </script>
 
 <script type="text/javascript">
 
 var data_geojson = <% encode_json($tree) %>;
+var data_overlays = <% encode_json(\@overlays) %>;
 
 var baseStyle = {
   clickable: true,
@@ -75,7 +88,43 @@ var featureStyle = function(feature) {
 };
 
 var map;
-function initMap() {
+var overlays = [];
+var infoWindow; // shared among all users
+
+var clickHandler = function(ev) {
+  var feature = ev.feature;
+  if ( feature.getGeometry().getType() == 'Point' ) {
+    // then pop up an info box with the feature content
+    infoWindow.close();
+    infoWindow.setPosition(feature.getGeometry().get());
+
+    if ( feature.getProperty('content') ) {
+      infoWindow.setContent(feature.getProperty('content'));
+    } else {
+      infoWindow.setContent('');
+    }
+
+    if ( feature.getProperty('url') ) {
+      $.ajax({
+        url: feature.getProperty('url'),
+        success: function(data) {
+          infoWindow.setContent(data);
+        }
+      });
+      infoWindow.open(map);
+    } else {
+      infoWindow.open(map);
+    }
+  }
+
+  // snap to feature ROI if it has one
+  if ( feature.getProperty('bounds') ) {
+    map.fitBounds( feature.getProperty('bounds') );
+  }
+
+};
+
+var initMap = function() {
   var canvas = $('#map_canvas');
   map = new google.maps.Map(canvas[0], { zoom: 6 });
   try {
@@ -99,23 +148,17 @@ function initMap() {
   map.fitBounds(bounds);
   map.data.setStyle(featureStyle);
 
-  var info = new google.maps.InfoWindow;
-  map.data.addListener('click', function(ev) {
-    var feature = ev.feature;
-    if ( feature.getGeometry().getType() == 'Point' ) {
-      // then pop up an info box with the feature content
-      info.close();
-      info.setPosition(feature.getGeometry().get());
-      info.setContent(feature.getProperty('content'));
-      info.open(map);
-    }
-
-    // snap to feature ROI if it has one
-    if ( feature.getProperty('bounds') ) {
-      map.fitBounds( feature.getProperty('bounds') );
-    }
-
-  }); // addListener()
+  infoWindow = new google.maps.InfoWindow;
+  map.data.addListener('click', clickHandler);
+  // xxx remove this later
+  data_overlays.forEach(function(x) {
+    var url = x.url;
+    delete x.url;
+    var overlay = new google.maps.GroundOverlay( url, x );
+    overlay.setMap(map);
+    overlay.setOpacity(0.4);
+    overlays.push(overlay); 
+  });
 }
 
 $().ready( initMap );