blob: 7d1447f9813665d9c4789d1bfc3eb8fc85c6a9e1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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>
|