httemplate/elements/mapselect.html

   1 <%init>
   2 my $conf = new FS::Conf;
   3 my $apikey = $conf->config('google_maps_api_key');
   4
   5 my %opt = @_;
   6
   7 # Currently requires two fields named 'latitude' and 'longitude'.
   8 # Those should be in the edit form. This widget should NOT be in the
   9 # edit form (or it will submit a bunch of spurious fields, plus pressing
  10 # "enter" in the search box will submit the form).
  11
  12 </%init>
  13 <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=<% $apikey %>"></script>
  14 <script src="<% $fsurl %>elements/jquery-gmaps-latlon-picker.js"></script>
  15 <style>
  16   .gllpLatlonPicker, .gllpMap { width: 600px; height: 600px }
  17   #search_location { width: 300px }
  18 </style>
  19 <fieldset id="latlonpicker" class="gllpLatlonPicker" style="float: right">
  20   <input type="text" id="search_location">
  21   <input type="hidden" class="gllpLatitude" id="map_lat">
  22   <input type="hidden" class="gllpLongitude" id="map_lon">
  23   <input type="hidden" class="gllpElevation" id="map_alt">
  24   <input type="hidden" class="gllpZoom" id="map_zoom">
  25   <div class="gllpMap"></div>
  26 </fieldset>
  27 <br/>
  28
  29 <script>
  30
  31 $(function() {
  32   var container = $('#latlonpicker');
  33   var map = gMapsLatLonPickerState['latlonpicker'].vars.map;
  34
  35   $(document).on('location_changed', function(ev, obj) {
  36     lat.val($('#map_lat').val());
  37     lon.val($('#map_lon').val());
  38   });
  39
  40   // requires the Elevation API to be enabled
  41   $(document).on('elevation_changed', function(ev, obj) {
  42     alt.val($('#map_alt').val());
  43   });
  44
  45   // bypass gllp's search mechanism, use the cooler Places search
  46   var searchbox_input = $('#search_location')[0];
  47   var searchbox = new google.maps.places.SearchBox(searchbox_input);
  48   map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchbox_input);
  49
  50   map.addListener('bounds_changed', function() {
  51     searchbox.setBounds(map.getBounds());
  52   });
  53
  54   searchbox.addListener('places_changed', function() {
  55     var places = searchbox.getPlaces();
  56     if (places[0]) {
  57       $('#map_lat').val( places[0].geometry.location.lat() );
  58       $('#map_lon').val( places[0].geometry.location.lng() );
  59       $('#map_zoom').val(12);
  60       $(document).trigger('gllp_update_fields');
  61     }
  62   });
  63
  64   // load initial values
  65   var lat = $('#latitude');
  66   var lon = $('#longitude');
  67   var alt = $('#altitude');
  68   if (lat.val() && lon.val()) {
  69     $('#map_lat').val(lat.val());
  70     $('#map_lon').val(lon.val());
  71     $('#map_alt').val(alt.val());
  72     $('#map_zoom').val(12);
  73   } else {
  74     // uh. North America? that's where Map::Splat works right now.
  75     $('#map_lat').val(54.5259614);
  76     $('#map_lon').val(-105.25511870000003);
  77     $('#map_zoom').val(3);
  78   }
  79   $(document).trigger('gllp_update_fields');
  80
  81 });
  82 </script>