5 Generic Google Maps front end.
7 <& /elements/gmap.html,
12 coordinates => [ -86, 40 ], # optionally altitude as the third coord
15 # see https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.StyleOptions
19 fillColor => 'orange',
22 # content of popup info box (might AJAX this later)
23 content => '<a href="view/svc_acct.cgi?12">username@example.com</a>',
32 $_->{type} = 'Feature';
33 # any other per-feature massaging can go here
36 type => 'FeatureCollection',
37 features => \@features
41 <div id="map_canvas"></div>
43 <style type="text/css">
46 body { height: 100%; margin: 0px; padding: 0px }
48 #map_canvas { height: 100%; }
51 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
54 <script type="text/javascript">
56 var data_geojson = <% encode_json($tree) %>;
61 path: google.maps.SymbolPath.CIRCLE,
70 var featureStyle = function(feature) {
71 // jQuery.extend(): merge properties of objects
72 // 'true' makes it a deep copy; start the merge with {} so that
73 // baseStyle doesn't get overwritten
74 return $.extend(true, {}, baseStyle, feature.getProperty('style'));
79 var canvas = $('#map_canvas');
80 map = new google.maps.Map(canvas[0], { zoom: 6 });
82 map.data.addGeoJson(data_geojson);
84 console.log(ex.toString);
88 // construct bounds around all of the features
89 var bounds = new google.maps.LatLngBounds;
90 map.data.forEach(function(feature) {
91 var g = feature.getGeometry();
92 if (g.getType() == 'Point') {
93 bounds.extend(g.get());
94 } else if (g.getArray) {
95 g.getArray().forEach(function(point) { bounds.extend(point); });
99 map.fitBounds(bounds);
100 map.data.setStyle(featureStyle);
102 var info = new google.maps.InfoWindow;
103 map.data.addListener('click', function(ev) {
104 var feature = ev.feature;
105 if ( feature.getGeometry().getType() == 'Point' ) {
106 // then pop up an info box with the feature content
108 info.setPosition(feature.getGeometry().get());
109 info.setContent(feature.getProperty('content'));
113 // snap to feature ROI if it has one
114 if ( feature.getProperty('bounds') ) {
115 map.fitBounds( feature.getProperty('bounds') );
121 $().ready( initMap );