map selection of tower site

[freeside.git] / httemplate / elements / mapselect.html

diff --git a/httemplate/elements/mapselect.html b/httemplate/elements/mapselect.html
new file mode 100644 (file)
index 0000000..7d1447f
--- /dev/null
+++ b/httemplate/elements/mapselect.html
@@ -0,0 +1,72 @@
+<%init>
+my $conf = new FS::Conf;
+my $apikey = $conf->config('google_maps_api_key');
+
+my %opt = @_;
+
+# Currently requires two fields named 'latitude' and 'longitude'.
+# Those should be in the edit form. This widget should NOT be in the
+# edit form (or it will submit a bunch of spurious fields, plus pressing
+# "enter" in the search box will submit the form).
+
+</%init>
+<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=<% $apikey %>"></script>
+<script src="<% $fsurl %>elements/jquery-gmaps-latlon-picker.js"></script>
+<style>
+  .gllpLatlonPicker, .gllpMap { width: 600px; height: 600px }
+  #search_location { width: 300px }
+</style>
+<fieldset id="latlonpicker" class="gllpLatlonPicker" style="float: right">
+  <input type="text" id="search_location">
+  <input type="hidden" class="gllpLatitude" id="map_lat">
+  <input type="hidden" class="gllpLongitude" id="map_lon">
+  <input type="hidden" class="gllpElevation" id="map_alt">
+  <input type="hidden" class="gllpZoom" id="map_zoom" value="12">
+  <div class="gllpMap"></div>
+</fieldset>
+<br/>
+
+<script>
+
+$(function() {
+  var container = $('#latlonpicker');
+  var map = gMapsLatLonPickerState['latlonpicker'].vars.map;
+
+  var lat = $('#latitude');
+  var lon = $('#longitude');
+  var alt = $('#altitude');
+  $('#map_lat').val(lat.val());
+  $('#map_lon').val(lon.val());
+  $('#map_alt').val(alt.val());
+  $(document).trigger('gllp_update_fields');
+
+  $(document).on('location_changed', function(ev, obj) {
+    lat.val($('#map_lat').val());
+    lon.val($('#map_lon').val());
+  });
+
+  // requires the Elevation API to be enabled
+  $(document).on('elevation_changed', function(ev, obj) {
+    alt.val($('#map_alt').val());
+  });
+
+  // bypass gllp's search mechanism, use the cooler Places search
+  var searchbox_input = $('#search_location')[0];
+  var searchbox = new google.maps.places.SearchBox(searchbox_input);
+  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchbox_input);
+
+  map.addListener('bounds_changed', function() {
+    searchbox.setBounds(map.getBounds());
+  });
+
+  searchbox.addListener('places_changed', function() {
+    var places = searchbox.getPlaces();
+    if (places[0]) {
+      $('#map_lat').val( places[0].geometry.location.lat() );
+      $('#map_lon').val( places[0].geometry.location.lng() );
+      $('#map_zoom').val(12);
+      $(document).trigger('gllp_update_fields');
+    }
+  });
+});
+</script>