X-Git-Url: http://git.freeside.biz/gitweb/?a=blobdiff_plain;f=httemplate%2Fsearch%2Felements%2Fgmap.html;h=69fdc5a09f8af737f7565f9dcb3740e070fe288c;hb=d8648be92fa4c30d9ca4377dc0ac8816438e1370;hp=632a323386b71dfc6d9a6086779097defb94689b;hpb=1d50ab91a52be49724771accae7cc82740e83956;p=freeside.git

diff --git a/httemplate/search/elements/gmap.html b/httemplate/search/elements/gmap.html
index 632a32338..69fdc5a09 100644
--- a/httemplate/search/elements/gmap.html
+++ b/httemplate/search/elements/gmap.html
@@ -26,7 +26,7 @@ Generic Google Maps front end.
     }, # end of feature
   ],
   overlays => [
-    { url => 'https://localhost/freeside/view/sector_overlay-png.html?102',
+    { url => 'https://localhost/freeside/view/sector_map-png.html?102',
       west  => -130.0,
       east  => -128.0,
       south => 10.0,
@@ -37,6 +37,9 @@ Generic Google Maps front end.
 
 </%doc>
 <%init>
+
+my $apikey = FS::Conf->new->config('google_maps_api_key');
+
 foreach (@features) {
   $_->{type} = 'Feature';
   # any other per-feature massaging can go here
@@ -57,7 +60,7 @@ 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">
@@ -85,8 +88,43 @@ var featureStyle = function(feature) {
 };
 
 var map;
-var overlays;
-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 {
@@ -110,29 +148,15 @@ 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); 
   });
 }