X-Git-Url: http://git.freeside.biz/gitweb/?a=blobdiff_plain;f=httemplate%2Felements%2Fpolygon.html;h=a0d380bb8f1710c008c86f3e8b66dd427665428e;hb=b7d4aaee22ceda078bbfcca47038eb0bf4230a1c;hp=c26e98546444b8f7429ecdf0ff851b25e5fd7167;hpb=cace897d9c5fbe1f80277b0cb14e85c9d2272cf1;p=freeside.git

diff --git a/httemplate/elements/polygon.html b/httemplate/elements/polygon.html
index c26e98546..a0d380bb8 100644
--- a/httemplate/elements/polygon.html
+++ b/httemplate/elements/polygon.html
@@ -5,11 +5,15 @@ my $id = $opt{'id'} || $opt{'field'};
 my $div_id = "div_$id";
 
 my $vertices_json = $opt{'curr_value'} || '[]';
+
+my $apikey = FS::Conf->new->config('google_maps_api_key');
+
 </%init>
 <& hidden.html, %opt &>
 <div id="<% $div_id %>" style="height: 600px; width: 600px"></div>
+<div id="<% $div_id %>_hint" style="width: 100%; border: 2px solid black; text-align: center; box-sizing: border-box; padding: 4px">&nbsp;</div>
 
-<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
+<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&v=3.22<% $apikey ? "&key=$apikey" : '' %>"></script>
 <script>
 var map;
 var drawingManager;
@@ -21,7 +25,7 @@ function updateFormInput(event) {
     var xy = path.getAt(i);
     vertices[i] = [ xy.lat(), xy.lng() ];
   }
-  console.log(vertices); //XXX
+  if (console) console.log(vertices); //XXX
   $('#<% $field %>').prop('value', JSON.stringify(vertices));
 }
 
@@ -34,7 +38,13 @@ $(function() {
     scaleControl: true,
     streetViewControl: false,
   };
-  map = new google.maps.Map($('#<% $div_id %>')[0], mapOptions);
+  var div_map = $('#<% $div_id %>');
+  var div_hint = $('#<% $div_id %>_hint');
+  map = new google.maps.Map(div_map[0], mapOptions);
+
+  var set_hint = function(txt) {
+    div_hint.text(txt);
+  }
 
   var polygonComplete = function(p) {
     window.polygon = p;
@@ -55,6 +65,9 @@ $(function() {
 
     // and also now
     updateFormInput();
+
+    set_hint('Edit the zone by dragging the markers. Double-click to remove a vertex.');
+
   };
 
   var polygonOptions = {
@@ -118,6 +131,8 @@ $(function() {
         map.setZoom(12);
       });
     } // on error, or if geolocation isn't available, do nothing
+
+    set_hint('Click to place the corners of the zone.');
   }
 
 });