6 Generic Google Maps front end.
8 <& /elements/gmap.html,
10 { id => 'svc_acct/12',
13 coordinates => [ -86, 40 ], # optionally altitude as the third coord
16 # see https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.StyleOptions
20 fillColor => 'orange',
23 # content of popup info box (might AJAX this later)
24 content => '<a href="view/svc_acct.cgi?12">username@example.com</a>',
29 { url => 'https://localhost/freeside/view/sector_map-png.html?102',
34 }, # make a ground overlay
41 my $apikey = FS::Conf->new->config('google_maps_api_key');
44 $_->{type} = 'Feature';
45 # any other per-feature massaging can go here
48 type => 'FeatureCollection',
49 features => \@features
53 <div id="map_canvas"></div>
55 <style type="text/css">
58 body { height: 100%; margin: 0px; padding: 0px }
60 #map_canvas { height: 100%; }
63 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=<% $apikey %>">
66 <script type="text/javascript">
68 var data_geojson = <% encode_json($tree) %>;
69 var data_overlays = <% encode_json(\@overlays) %>;
74 path: google.maps.SymbolPath.CIRCLE,
83 var featureStyle = function(feature) {
84 // jQuery.extend(): merge properties of objects
85 // 'true' makes it a deep copy; start the merge with {} so that
86 // baseStyle doesn't get overwritten
87 return $.extend(true, {}, baseStyle, feature.getProperty('style'));
92 var infoWindow; // shared among all users
94 var clickHandler = function(ev) {
95 var feature = ev.feature;
96 if ( feature.getGeometry().getType() == 'Point' ) {
97 // then pop up an info box with the feature content
99 infoWindow.setPosition(feature.getGeometry().get());
101 if ( feature.getProperty('content') ) {
102 infoWindow.setContent(feature.getProperty('content'));
104 infoWindow.setContent('');
107 if ( feature.getProperty('url') ) {
109 url: feature.getProperty('url'),
110 success: function(data) {
111 infoWindow.setContent(data);
114 infoWindow.open(map);
116 infoWindow.open(map);
120 // snap to feature ROI if it has one
121 if ( feature.getProperty('bounds') ) {
122 map.fitBounds( feature.getProperty('bounds') );
127 var initMap = function() {
128 var canvas = $('#map_canvas');
129 map = new google.maps.Map(canvas[0], { zoom: 6 });
131 map.data.addGeoJson(data_geojson);
133 console.log(ex.toString);
137 // construct bounds around all of the features
138 var bounds = new google.maps.LatLngBounds;
139 map.data.forEach(function(feature) {
140 var g = feature.getGeometry();
141 if (g.getType() == 'Point') {
142 bounds.extend(g.get());
143 } else if (g.getArray) {
144 g.getArray().forEach(function(point) { bounds.extend(point); });
148 map.fitBounds(bounds);
149 map.data.setStyle(featureStyle);
151 infoWindow = new google.maps.InfoWindow;
152 map.data.addListener('click', clickHandler);
153 // xxx remove this later
154 data_overlays.forEach(function(x) {
157 var overlay = new google.maps.GroundOverlay( url, x );
159 overlay.setOpacity(0.4);
160 overlays.push(overlay);
164 $().ready( initMap );