SHOW:
|
|
- or go back to the newest paste.
1 | /************ FUNCTIONS.JS ************************/ | |
2 | /*************************************************/ | |
3 | /** | |
4 | * @package BasicGoogleMapsPlacemarks | |
5 | * @author Ian Dunn <ian@iandunn.name> | |
6 | * @link http://wordpress.org/extend/plugins/basic-google-maps-placemarks/ | |
7 | */ | |
8 | ||
9 | ||
10 | /** | |
11 | * Wrapper function to safely use $ | |
12 | * @author Ian Dunn <ian@iandunn.name> | |
13 | */ | |
14 | function bgmp_wrapper( $ ) | |
15 | { | |
16 | // @todo - figure out if wrapper bad for memory consumption (https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope#Efficiency_considerations) | |
17 | // ask on stackoverflow | |
18 | ||
19 | $.bgmp = | |
20 | { | |
21 | /** | |
22 | * Main entry point | |
23 | * @author Ian Dunn <ian@iandunn.name> | |
24 | */ | |
25 | init : function() | |
26 | { | |
27 | $.bgmp.name = 'Basic Google Maps Placemarks'; | |
28 | $.bgmp.canvas = document.getElementById( 'bgmp_map-canvas' ); // We have to use getElementById instead of a jQuery selector here in order to pass it to the Maps API. | |
29 | $.bgmp.previousInfoWindow = undefined; | |
30 | $.bgmp.map = undefined; | |
31 | $.bgmp.markerClusterer = undefined; | |
32 | $.bgmp.markers = []; | |
33 | ||
34 | ||
35 | //custom stuff for Filters Jesse 13/Dec | |
36 | $.bgmp.markers.all = []; | |
37 | ||
38 | ||
39 | // @todo make this loop through array instead of manual. also add any other numbers | |
40 | bgmpData.options.zoom = parseInt( bgmpData.options.zoom ), | |
41 | bgmpData.options.latitude = parseFloat( bgmpData.options.latitude ); | |
42 | bgmpData.options.longitude = parseFloat( bgmpData.options.longitude ); | |
43 | bgmpData.options.clustering.maxZoom = parseInt( bgmpData.options.clustering.maxZoom ); | |
44 | bgmpData.options.clustering.gridSize = parseInt( bgmpData.options.clustering.gridSize ); | |
45 | ||
46 | if( $.bgmp.canvas ) { | |
47 | $.bgmp.buildMap(); | |
48 | } | |
49 | else | |
50 | $( $.bgmp.canvas ).html( $.bgmp.name + " error: couldn't retrieve DOM elements." ); | |
51 | }, | |
52 | ||
53 | /** | |
54 | * Pull in the map options from Wordpress' database and create the map | |
55 | * @author Ian Dunn <ian@iandunn.name> | |
56 | */ | |
57 | buildMap : function() | |
58 | { | |
59 | var mapOptions; | |
60 | ||
61 | if( bgmpData.options.mapWidth == '' || bgmpData.options.mapHeight == '' || bgmpData.options.latitude == '' || bgmpData.options.longitude == '' || bgmpData.options.zoom == '' || bgmpData.options.infoWindowMaxWidth == '' ) | |
62 | { | |
63 | // @todo update w/ cluster options? | |
64 | ||
65 | $( $.bgmp.canvas ).html( $.bgmp.name + " error: map options not set." ); | |
66 | return; | |
67 | } | |
68 | ||
69 | mapOptions = | |
70 | { | |
71 | 'zoom' : bgmpData.options.zoom, | |
72 | 'center' : new google.maps.LatLng( bgmpData.options.latitude, bgmpData.options.longitude ), | |
73 | 'mapTypeId' : google.maps.MapTypeId[ bgmpData.options.type ], | |
74 | 'mapTypeControl' : bgmpData.options.typeControl == 'off' ? false : true, | |
75 | 'mapTypeControlOptions' : { style: google.maps.MapTypeControlStyle[ bgmpData.options.typeControl ] }, | |
76 | 'navigationControl' : bgmpData.options.navigationControl == 'off' ? false : true, | |
77 | 'navigationControlOptions' : { style: google.maps.NavigationControlStyle[ bgmpData.options.navigationControl ] }, | |
78 | 'streetViewControl' : bgmpData.options.streetViewControl | |
79 | }; | |
80 | ||
81 | // Override default width/heights from settings | |
82 | $( '#bgmp_map-canvas' ).css( 'width', bgmpData.options.mapWidth ); //'100%'); // @todo use $.bgmp.canvas intead of hardcoding it? | |
83 | $( '#bgmp_map-canvas' ).css( 'height', bgmpData.options.mapHeight ); // '100%'); Making map responsive. | |
84 | // @todo this prevents users from using their own stylesheet? | |
85 | ||
86 | ||
87 | // Create the map | |
88 | try | |
89 | { | |
90 | $.bgmp.map = new google.maps.Map( $.bgmp.canvas, mapOptions ); | |
91 | } | |
92 | catch( e ) | |
93 | { | |
94 | $( $.bgmp.canvas ).html( $.bgmp.name + " error: couln't build map." ); | |
95 | if( window.console ) | |
96 | console.log( 'bgmp_buildMap: '+ e ); | |
97 | ||
98 | return; | |
99 | } | |
100 | ||
101 | $.bgmp.addPlacemarks( $.bgmp.map ); // @todo not supposed to add them when clustering is enabled? http://www.youtube.com/watch?v=Z2VF9uKbQjI | |
102 | ||
103 | if( bgmpData.options.clustering.enabled ) | |
104 | { | |
105 | $.bgmp.markerCluster = new MarkerClusterer( // @todo should be .markerClusterer ? | |
106 | $.bgmp.map, | |
107 | $.bgmp.markers, | |
108 | { | |
109 | maxZoom : bgmpData.options.clustering.maxZoom, | |
110 | gridSize : bgmpData.options.clustering.gridSize, | |
111 | styles : bgmpData.options.clustering.styles[ bgmpData.options.clustering.style ] | |
112 | } | |
113 | ); | |
114 | } | |
115 | }, | |
116 | ||
117 | /** | |
118 | * Checks if the value is an integer. Slightly modified version of original. | |
119 | * @author Invent Partners | |
120 | * @link http://www.inventpartners.com/content/javascript_is_int | |
121 | * @param mixed value | |
122 | * @return bool | |
123 | */ | |
124 | isInt : function( value ) | |
125 | { | |
126 | if( !isNaN( value ) && parseFloat( value ) == parseInt( value ) ) | |
127 | return true; | |
128 | else | |
129 | return false; | |
130 | }, | |
131 | ||
132 | /** | |
133 | * Pull the placemark posts from Wordpress' database and add them to the map | |
134 | * @author Ian Dunn <ian@iandunn.name> | |
135 | * @param object map Google Maps map | |
136 | */ | |
137 | addPlacemarks : function( map ) | |
138 | { | |
139 | // @todo - should probably refactor this since you pulled out the ajax. update phpdoc too | |
140 | ||
141 | if( bgmpData.markers.length > 0 ) | |
142 | { | |
143 | for( var m in bgmpData.markers ) | |
144 | { | |
145 | $.bgmp.createMarker( | |
146 | map, | |
147 | bgmpData.markers[ m ][ 'title' ], | |
148 | bgmpData.markers[ m ][ 'latitude' ], | |
149 | bgmpData.markers[ m ][ 'longitude' ], | |
150 | bgmpData.markers[ m ][ 'details' ], | |
151 | bgmpData.markers[ m ][ 'icon' ], | |
152 | parseInt( bgmpData.markers[ m ][ 'zIndex' ] ), | |
153 | bgmpData.markers[ m ][ 'categories' ] //Added by Jesse 13/Dec | |
154 | ); | |
155 | } | |
156 | } | |
157 | }, | |
158 | ||
159 | /** | |
160 | * Create a marker with an information window | |
161 | * @author Ian Dunn <ian@iandunn.name> | |
162 | * @param object map Google Maps map | |
163 | * @param string title Placemark title | |
164 | * @param float latituded | |
165 | * @param float longitude | |
166 | * @param string details Content of the infowinder | |
167 | * @param string icon URL of the icon | |
168 | * @param int zIndex The desired position in the placemark stacking order | |
169 | * @param category array <-- added by Jesse 13/Dec | |
170 | * @return bool True on success, false on failure | |
171 | */ | |
172 | createMarker : function( map, title, latitude, longitude, details, icon, zIndex, categories ) | |
173 | { | |
174 | // @todo - clean up variable names | |
175 | ||
176 | var infowindowcontent, infowindow, marker; | |
177 | ||
178 | if( isNaN( latitude ) || isNaN( longitude ) ) | |
179 | { | |
180 | if( window.console ) | |
181 | console.log( "bgmp_createMarker(): "+ title +" latitude and longitude weren't valid." ); | |
182 | ||
183 | return false; | |
184 | } | |
185 | ||
186 | if( icon == null ) | |
187 | { | |
188 | // @todo - this check may not be needed anymore | |
189 | ||
190 | if( window.console ) | |
191 | console.log( "bgmp_createMarker(): "+ title +" icon wasn't passed in." ); | |
192 | return false; | |
193 | } | |
194 | ||
195 | if( !$.bgmp.isInt( zIndex ) ) | |
196 | { | |
197 | //if( window.console ) | |
198 | //console.log( "bgmp_createMarker(): "+ title +" z-index wasn't valid." ); // this would fire any time it's empty | |
199 | ||
200 | zIndex = 0; | |
201 | } | |
202 | ||
203 | infowindowcontent = '<div class="bgmp_placemark"> <h3>'+ title +'</h3> <div>'+ details +'</div> </div>'; | |
204 | ||
205 | try | |
206 | { | |
207 | infowindow = new google.maps.InfoWindow( { | |
208 | content : infowindowcontent, | |
209 | maxWidth : bgmpData.options.infoWindowMaxWidth | |
210 | } ); | |
211 | ||
212 | // Replace commas with periods. Some (human) languages use commas to delimit the fraction from the whole number, but Google Maps doesn't accept that. | |
213 | latitude = parseFloat( latitude.replace( ',', '.' ) ); | |
214 | longitude = parseFloat( longitude.replace( ',', '.' ) ); | |
215 | ||
216 | marker = new google.maps.Marker( { | |
217 | 'position' : new google.maps.LatLng( latitude, longitude ), | |
218 | 'map' : map, | |
219 | 'icon' : icon, | |
220 | 'title' : title, | |
221 | 'zIndex' : zIndex | |
222 | } ); | |
223 | ||
224 | //Store Markers inside an array based on their categories. Jesse 13/Dec | |
225 | for (var s in categories) { | |
226 | title = categories[s]['name']; | |
227 | if (!$.bgmp.markers[title]){ | |
228 | $.bgmp.markers[title] = []; | |
229 | $.bgmp.markers.push(title); | |
230 | } | |
231 | $.bgmp.markers[title].push(marker); | |
232 | } | |
233 | ||
234 | //Need to store ALL markers inside an array to compensate for the possibility of multiple categories. Jesse 13/Dec | |
235 | $.bgmp.markers.all.push( marker ); | |
236 | ||
237 | google.maps.event.addListener( marker, 'click', function() | |
238 | { | |
239 | if( $.bgmp.previousInfoWindow != undefined ) | |
240 | $.bgmp.previousInfoWindow.close(); | |
241 | ||
242 | infowindow.open( map, marker ); | |
243 | $.bgmp.previousInfoWindow = infowindow; | |
244 | } ); | |
245 | ||
246 | return true; | |
247 | } | |
248 | catch( e ) | |
249 | { | |
250 | //$( $.bgmp.canvas ).append( '<p>' + $.bgmp.name + " error: couldn't add map placemarks.</p>"); // add class for making red? other places need this too? // @todo - need to figure out a good way to alert user that placemarks couldn't be added | |
251 | if( window.console ) | |
252 | console.log( 'bgmp_createMarker: '+ e ); | |
253 | } | |
254 | } | |
255 | }; // end bgmp | |
256 | ||
257 | // Kick things off... | |
258 | $( document ).ready( $.bgmp.init ); | |
259 | ||
260 | } // end bgmp_wrapper() | |
261 | ||
262 | bgmp_wrapper( jQuery ); | |
263 | ||
264 | ||
265 | ||
266 | /************CUSTOM JAVASCRIPT************************/ | |
267 | /****************************************************/ | |
268 | $.geocoder; | |
269 | var html = ''; | |
270 | ||
271 | $(document).ready(function(){ | |
272 | //Add the Filtered Nav Div | |
273 | if ($('#map').length) { | |
274 | $('#map').append("<div id='filteredNav' /><hr /><div id='mapLocs' style='padding-left:30px;' />"); | |
275 | $.each($.bgmp.markers, function(index, arr) { | |
276 | $('#filteredNav').append('<button class="fNav shown" value='+$.bgmp.markers[index]+''+'>'+$.bgmp.markers[index]+'</button>'); | |
277 | }); | |
278 | } | |
279 | //Verify that there are categories. | |
280 | if ($('#filteredNav').length > 0) { | |
281 | //This isn't a good way to do this, but this will allow the ability to show multiple groups of markers. | |
282 | $('#filteredNav button').click(function() { | |
283 | if(!$(this).hasClass('shown')) { | |
284 | $(this).addClass('shown'); | |
285 | } else { $(this).removeClass('shown'); } | |
286 | //Hide all markers | |
287 | $.each($.bgmp.markers.all, function(index, marker) { | |
288 | $.each(marker, function(key, value) { | |
289 | marker.setVisible(false); | |
290 | }); | |
291 | }); | |
292 | //show only the markers that should be visible | |
293 | $('#filteredNav .shown').each(function() { | |
294 | var check = $(this).attr('value'); | |
295 | html = html + '<h3>'+check+'</h3><ul>'; | |
296 | $.each($.bgmp.markers[check], function(index, marker) { | |
297 | $.each(marker, function(key, value) { | |
298 | marker.setVisible(true); | |
299 | }); | |
300 | if($.bgmp.map.getBounds().contains(marker.getPosition())) { | |
301 | //html = html+'key: '+key+' = value: '+value+';<br /> '; | |
302 | html = html +'<li style="list-style:none;height:35px;"><a style="cursor:pointer;" class="'+check+'-'+index+'"><img style="float:left;" src="'+marker['icon']+'" />'; | |
303 | html = html +marker['title']+'</a></li>'; | |
304 | } | |
305 | }); | |
306 | html = html+'</ul>'; | |
307 | }); | |
308 | $('#mapLocs').html(html); | |
309 | }); | |
310 | ||
311 | ||
312 | //Center Map on Marker Clicked | |
313 | $('#mapLocs').on('click','a', function(event) { | |
314 | event.preventDefault(); | |
315 | var loc = $(this).attr('class').split('-'); | |
316 | $.bgmp.map.panTo($.bgmp.markers[loc[0]][loc[1]].getPosition()); | |
317 | $.bgmp.map.setZoom(15); | |
318 | }); | |
319 | } | |
320 | ||
321 | ||
322 | //Override Search | |
323 | $('form[id=mapSearchForm]').submit(function(e) { | |
324 | e.preventDefault(); | |
325 | codeAddress($(this).find('input[name="q"]').val()); | |
326 | }); | |
327 | ||
328 | //http://stackoverflow.com/questions/4338490/google-map-event-bounds-changed-triggered-multiple-times-when-dragging | |
329 | //https://developers.google.com/maps/documentation/javascript/events#EventListeners | |
330 | - | google.maps.event.addListener($.map, 'center_changed', function () { |
330 | + | google.maps.event.addListener($.bgmp.map, 'center_changed', function () { |
331 | - | window.alert('Timer Fired'); |
331 | + | window.setTimeout(function() { |
332 | - | /* $('#filteredNav .shown').each(function() { |
332 | + | html = ""; |
333 | //window.alert('Timer Fired'); | |
334 | $('#filteredNav .shown').each(function() { | |
335 | var check = $(this).attr('value'); | |
336 | html = html + '<h3>'+check+'</h3><ul>'; | |
337 | $.each($.bgmp.markers[check], function(index, marker) { | |
338 | if($.bgmp.map.getBounds().contains(marker.getPosition())) { | |
339 | //html = html+'key: '+key+' = value: '+value+';<br /> '; | |
340 | html = html +'<li style="list-style:none;height:35px;"><a style="cursor:pointer;" class="'+check+'-'+index+'"><img style="float:left;" src="'+marker['icon']+'" />'; | |
341 | html = html +marker['title']+'</a></li>'; | |
342 | } | |
343 | }); | |
344 | - | $('#mapLocs').html(html); */ |
344 | + | |
345 | }); | |
346 | $('#mapLocs').html(html); | |
347 | }, 300); | |
348 | }); | |
349 | }); | |
350 | ||
351 | ||
352 | //Credit to: http://stackoverflow.com/questions/6140303/google-maps-v3-how-to-center-using-an-address-on-initialize | |
353 | function codeAddress(address) { | |
354 | $.geocoder = new google.maps.Geocoder(); | |
355 | $.geocoder.geocode( { 'address': address}, function(results, status) { | |
356 | if (status == google.maps.GeocoderStatus.OK) { | |
357 | $.bgmp.map.panTo(results[0].geometry.location); | |
358 | } | |
359 | }); | |
360 | } |