map
Attachment 'jquery-ubuntu-maps.js'
Download 1 //You need an anonymous function to wrap around your function to avoid conflict
2 (function($){
3 //Attach this new method to jQuery
4 $.fn.extend({
5 //This is where you write your plugin's name
6 showLocations: function(options){
7 //Set the default values, use comma to separate the settings, example:
8 var defaults = {
9 markers_url: null, // http://link/to/json/markers or /link/to/json/markers
10 markers_list: null, // [ {lat: 0.345, lng: 0.3456}, {lat: 44.345, lng: 34.3456} ]
11 position_name: {
12 lat: 'lat', // { lat: 0.4567, lng: 0.2345 }
13 lng: 'lng' // { lat: 0.4567, lng: 0.2345 }
14 },
15 marker_content_url: null, // The url to load when clicked on a marker
16 marker_content_tmpl: null, // The template to load when clicked on a marker
17 mapOptions: {
18 zoom: 2,
19 center: new google.maps.LatLng(22, 12),
20 mapTypeId: google.maps.MapTypeId.ROADMAP,
21 mapTypeControl: false
22 },
23 user_location_zoom: 7, // use null to disable this feature
24 center_at_single_marker: true,
25 ajax_load_error: '<p>The page could not be loaded</p>',
26 ajax_load_icon: '/ubuntu-website/media/images/ajax-loader.gif',
27 marker_icon: null,
28 cluster_tmpl: null,
29 mcOptions: { gridSize: 40, maxZoom: 10, zoomOnClick: false//, styles: [
30 //{ url: 'images/supportCluster1.png', height: 48, width: 48, opt_anchor: [16, 0], opt_textColor: '#ffffff', opt_textSize: 10 }, /* 2-9 members */
31 //{ url: 'images/supportCluster2.png', height: 64, width: 64, opt_anchor: [24, 0], opt_textColor: '#ffffff', opt_textSize: 11 }, /* 10-99 members */
32 //{ url: 'images/supportCluster3.png', height: 96, width: 96, opt_anchor: [32, 0], opt_textColor: '#ffffff', opt_textSize: 12 }, /* 100-999 members */
33 //{ url: 'images/supportCluster4.png', height: 128, width: 128, opt_anchor: [32, 0], opt_textColor: '#ffffff', opt_textSize: 12 } /* 1000+ members */
34 //]
35 }
36 },
37 // Add the window where the details are shown when clicked on a marker
38 infowindow = new google.maps.InfoWindow();
39
40 options = $.extend( defaults, options );
41
42 // TODO: rewrite this one
43 function getAjaxLoader() {
44 var ajaximg = $('<img src="' + options.ajax_load_icon + '" />')
45 .attr({'style': 'display:inline-block;vertical-align:middle;margin-right:10px;'}),
46 ajaxtxt = $('<p>')
47 .attr({'style': 'display:inline-block;vertical-align:middle;'})
48 .html('Retrieving data<br />from server...'),
49 wrapper = $('<div>')
50 .attr({'style': 'margin:auto;width:130px;'});
51 return wrapper.append(ajaximg).append(ajaxtxt)[0];
52 }
53
54 infowindow.show = function( html, pos ){
55 this.setContent( html );
56 this.setPosition( pos );
57 this.open( this.map );
58 };
59 infowindow.ajaxloader = null;
60 infowindow.showLoader = function( pos ){
61 // Set a temporary loader while the data is retreved from the server
62 if( this.ajaxloader === null ){
63 // TODO: allow user defined ajax loader
64 this.ajaxloader = getAjaxLoader();
65 }
66 this.show( this.ajaxloader, pos );
67 };
68 infowindow.showTemplate = function( url, data, pos ){
69 var $data = data,
70 $pos = pos;
71
72 if( !$.tmpl ){
73 alert( 'jQuery.tmpl is not installed\nYou can download here:\nhttp://github.com/jquery/jquery-tmpl' );
74 return false;
75 }
76
77 this.showLoader( pos );
78 $.ajax({ url: url,
79 dataType: 'html',
80 success: function( template ){
81 infowindow.show( $( template ).tmpl( $data )[0], $pos );
82 },
83 error: function(){
84 infowindow.show( options.ajax_load_error, $pos );
85 }
86 });
87 };
88 infowindow.showHTML = function( url, pos ){
89 var $pos = pos;
90
91 this.showLoader( pos );
92 $.ajax({ url: url,
93 dataType: 'html',
94 success: function( template ){
95 infowindow.show( html, $pos );
96 },
97 error: function(){
98 infowindow.show( options.ajax_load_error, $pos );
99 }
100 });
101 };
102
103 // Constructs an url with ${...} together with data to a normal url
104 function constructUrl( url, marker ){
105 var pattern = /\$\{[^}]+\}/g, // match pattern for ${....}
106 url_match = url.match( pattern ), // Matches the url for ${...} and returns a list of matches
107 param = null, // Used for getting a specific param from the marker
108 tag = null; // The tags in the match pattern
109
110 for( tag in url_match ){
111 if( url_match.hasOwnProperty( tag ) ){
112 param = url_match[tag];
113 url = url.replace( param, marker[param.slice( 2, param.length-1 )] );
114 }
115 }
116 return url;
117 }
118
119 // Function executed when clicked on a cluster object
120 function clusterClicked( cluster ) {
121 var marker_list = null;
122 if( options.cluster_tmpl ){
123 marker_list = cluster[0].getMarkerClusterer().getMarkers();
124 infowindow.showTemplate( options.cluster_tmpl, { marker_list: marker_list }, cluster[0].getCenter() );
125 }
126 }
127
128 // Function that is executed when user clicks on a marker
129 function markerClicked() {
130 var url = null;
131
132 if( options.marker_content_url ){
133 url = constructUrl( options.marker_content_url, this );
134 infowindow.showHTML( url, this.position );
135 } else if( options.marker_content_tmpl ){
136 infowindow.showTemplate( options.marker_content_tmpl, { marker: this }, this.position );
137 }
138 }
139
140 // Create from json data the google.maps.Marker and add them to the markercluster (mc)
141 // Then center the map if there is only one cluster and options.center_at_single_marker is true
142 function createMarkers( map, mc, markers ){
143 var marker_list = [], // A list of gmakers
144 marker = null, // The json of a marker
145 gmarker = null, // The actual google.maps.Marker() type
146 idx = null, // Index
147 lat = options.position_name.lat, // The parameter that contains the latitude
148 lng = options.position_name.lng; // The parameter that contains the longitude
149
150 if( markers[0].fields ){
151 // Django model
152 // Use django pk and fields parameters
153 for( idx in markers ){
154 if ( markers.hasOwnProperty( idx ) ) {
155 marker = markers[idx].fields;
156 marker.pk = markers[idx].pk;
157 marker.position = new google.maps.LatLng( marker[lat], marker[lng] );
158 if( !marker.icon && options.marker_icon ){
159 marker.icon = options.marker_icon;
160 }
161 gmarker = new google.maps.Marker( marker );
162 google.maps.event.addDomListener(gmarker, 'click', markerClicked);
163 marker_list.push( gmarker );
164 }
165 }
166
167 } else {
168 // Use normal parameters
169 for( idx in markers ){
170 if ( markers.hasOwnProperty( idx ) ) {
171 marker = markers[idx];
172 marker.position = new google.maps.LatLng( marker[lat], marker[lng] );
173 if( !markers[idx].icon && options.marker_icon ){
174 marker.icon = options.marker_icon;
175 }
176 gmarker = new google.maps.Marker( marker );
177 google.maps.event.addDomListener(gmarker, 'click', markerClicked);
178 marker_list.push( gmarker );
179 }
180 }
181 }
182 mc.addMarkers(marker_list);
183
184 // If there is only one marker
185 if ( options.center_at_single_marker && marker_list.length === 1 ){
186 // Make sure the map is initialized
187 // FIXME: Look for an map.init event
188 setTimeout(function(){
189 map.setCenter( mc.getMarkers()[0].getPosition() );
190 map.setZoom( options.user_location_zoom );
191 }, 100);
192 }
193 }
194
195 return $(this).each( function( i, html_element ){
196 var map = new google.maps.Map( html_element, options.mapOptions ),
197 markerCluster = new MarkerClusterer( map, [], options.mcOptions );
198
199 // FIXME: Manually override the zoomOnClick because of this bug
200 // http://www.devcomments.com/V3-MarkerClusterer-zoomOnClick-issue-at255452.htm
201 markerCluster.zoomOnClick_ = false;
202
203 // Attach the info window to the curernt map
204 infowindow.map = map;
205
206 // When clicked on a cluster, call the event
207 google.maps.event.addListener( markerCluster, 'clusterclick', clusterClicked );
208
209 // Try W3C Geolocation (Preferred)
210 // Ask the user for their location and set the map to it
211 if( options.user_location_zoom && navigator.geolocation ){
212 navigator.geolocation.getCurrentPosition( function( position ) {
213 var pos = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ),
214 opt = options;
215 map.setCenter( pos );
216 map.setZoom( opt.user_location_zoom );
217 });
218 }
219
220 // Load the list of markers into the map
221 if( options.markers_url ){
222 $.get( options.markers_url, function( markers ){
223 createMarkers( map, markerCluster, markers );
224 }, 'json');
225 } else if( options.markers._list ){
226 createMarkers( map, markerCluster, options.markers_list );
227 }
228 });
229 },
230 selectLocation: function(options){
231 var defaults = {
232 html_lng: null,
233 html_lat: null,
234 marker_icon: null,
235 markers: [],
236 html_addr: null,
237 mapOptions: {
238 zoom: 4,
239 center: new google.maps.LatLng(51.8211, 5.591),
240 mapTypeId: google.maps.MapTypeId.ROADMAP,
241 mapTypeControl: false
242 }
243 };
244 options = $.extend(defaults, options);
245
246 function showPositionHTML(location){
247 console.log('show', location);
248 if(options.html_lng && options.html_lat){
249 if( location.xa && location.za ){
250 options.html_lat.val(location.xa);
251 options.html_lng.val(location.za);
252 } else if( location.wa && location.ya ){
253 options.html_lat.val(location.wa);
254 options.html_lng.val(location.ya);
255 }
256 }
257 }
258
259 function setMarker(map, location){
260 var marker = null;
261
262 if( options.markers.length ){
263 marker = options.markers[0];
264 marker.setPosition(location);
265 marker.setAnimation(google.maps.Animation.DROP);
266 } else {
267 marker = new google.maps.Marker({
268 map: map,
269 position: location,
270 draggable:true,
271 animation: google.maps.Animation.DROP
272 });
273 if (options.marker_icon){
274 marker.icon = options.marker_icon;
275 }
276 options.markers.push(marker);
277 google.maps.event.addListener(options.markers[0], 'mouseup', function(){
278 showPositionHTML(marker.getPosition());
279 });
280 }
281
282 map.setCenter(location);
283 showPositionHTML(marker.getPosition());
284 }
285
286 return $(this).each(function(i, html_element){
287 var map = new google.maps.Map($(html_element)[0], options.mapOptions),
288 geoCoder = new google.maps.Geocoder();
289
290 if (options.html_addr) {
291 options.html_addr.change(function(){
292 var address = [];
293 options.html_addr.each(function(i, item){
294 address.push(item.value);
295 });
296
297 geoCoder.geocode({address: address.join(' ')}, function(results, status) {
298 if (status === google.maps.GeocoderStatus.OK) {
299 setMarker(map, results[0].geometry.location);
300 }
301 });
302 });
303 }
304 google.maps.event.addListener(map, 'click', function(event){
305 setMarker(map, event.latLng);
306 });
307
308 if (options.html_lat.val() && options.html_lng.val()) {
309 var location = new google.maps.LatLng(options.html_lat.val(),options.html_lng.val());
310 setMarker(map, location);
311 }
312 });
313
314 }
315 });
316 }(jQuery));
Attached Files
To refer to attachments on a page, use attachment:filename, as shown below in the list of files. Do NOT use the URL of the [get] link, since this is subject to change and can break easily.You are not allowed to attach a file to this page.