1(function($) { 2 $(window).on('load',function() { 3 if($('#map').length) { 4 new_map($('#map')); 5 } 6 }) 7 $(document).on('click', '#mapfilter li', function() { 8 if($(this).hasClass('active')) { 9 $(this).toggleClass('active'); 10 showAllMarkers(); 11 } 12 else { 13 $('li.active').removeClass('active'); 14 $(this).toggleClass('active'); 15 filterMarkers($(this).attr('data-value')); 16 } 17 }) 18 19/* 20* new_map 21* 22* This function will render a Google Map onto the selected jQuery element 23* 24* @type function 25* @date 8/11/2013 26* @since 4.3.0 27* 28* @param $el (jQuery element) 29* @return n/a 30*/ 31var map; 32var oms; 33function new_map( $el ) { 34 35 // var 36 var $markers = $el.find('.marker'); 37 38 var styledMapType = new google.maps.StyledMapType([{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#e9e9e9"}, {"lightness": 17}]},{"featureType": "landscape","elementType": "geometry","stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},{"featureType": "road.highway","elementType": "geometry.fill","stylers": [{"color": "#ffffff"},{"lightness": 17}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},{"featureType": "road.arterial","elementType": "geometry","stylers": [{"color": "#ffffff"},{"lightness": 18}]},{"featureType": "road.local","elementType": "geometry","stylers": [{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "poi","elementType": "geometry","stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#dedede"},{"lightness": 21}]},{"elementType": "labels.text.stroke","stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},{"elementType": "labels.text.fill","stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},{"elementType": "labels.icon","stylers": [{"visibility": "off"}]},{"featureType": "transit","elementType": "geometry","stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},{"featureType": "administrative","elementType": "geometry.fill","stylers": [{"color": "#fefefe"},{"lightness": 20}]},{"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]}]); 39 // vars 40 var args = { 41 zoom : 8, 42 center : { lat: 51.01201, lng: 4.27336 }, 43 mapTypeId : google.maps.MapTypeId.ROADMAP, 44 disableDefaultUI: true, 45 zoomControl: true, 46 scaleControl: true, 47 }; 48 49 50 // create map 51 map = new google.maps.Map( $el[0], args); 52 53 oms = new OverlappingMarkerSpiderfier(map, { 54 markersWontMove: false, 55 markersWontHide: false, 56 basicFormatEvents: false 57 }); 58 59 60 // add a markers reference 61 map.markers = []; 62 63 map.mapTypes.set('styled_map', styledMapType); 64 map.setMapTypeId('styled_map'); 65 66 // add markers 67 $markers.each(function(){ 68 add_marker( $(this), map ); 69 }); 70 71 72 // center map 73// center_map( map ); 74 75 76 // return 77 return map; 78 79} 80 81/* 82* add_marker 83* 84* This function will add a marker to the selected Google Map 85* 86* @type function 87* @date 8/11/2013 88* @since 4.3.0 89* 90* @param $marker (jQuery element) 91* @param map (Google Map object) 92* @return n/a 93*/ 94 95function add_marker( $marker, map ) { 96 97 // var 98 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); 99 var title = $marker.attr('ttl'); 100 var url = $marker.attr('data-url'); 101 var type = $marker.attr('data-type'); 102 var pin = ''; 103 if(type == 'carnaval') { 104 pin = 'pin-1.svg'; 105 } 106 else if(type == 'religieus-processie') { 107 pin = 'pin-2.svg'; 108 } 109 else if(type == 'religieus') { 110 pin = 'pin-3.svg'; 111 } 112 else if(type == 'stads-straat-wijkfeest') { 113 pin = 'pin-4.svg'; 114 } 115 else if(type == 'thematisch') { 116 pin = 'pin-5.svg'; 117 } 118 else if(type == 'varia') { 119 pin = 'pin-6.svg'; 120 } 121 else if(type == '' || type == null || type === undefined) { 122 pin = 'pin-2.svg'; 123 } 124 else { 125 pin = 'pin-8.svg'; 126 } 127 128// console.log(type); 129 var pin = ajax.siteurl+'/img/'+pin; 130 var image = { 131 url:pin, 132 size: new google.maps.Size(22, 35), 133 // The origin for this image is (0, 0). 134 135 }; 136 // create marker 137 var marker = new google.maps.Marker({ 138 position : latlng, 139 map : map, 140 icon : image, 141 title : title, 142 type : type, 143 url : url 144 145 }); 146 google.maps.event.addListener(marker, 'spider_click', function() { 147 window.location.href = url; 148 149 }); 150 151 152 // add to array 153 //map.markers.push( marker ); 154 155 oms.addMarker(marker); 156 157 // if marker contains HTML, add it to an infoWindow 158 if( $marker.html() ) 159 {
160 // create info window 161 var infowindow = new google.maps.InfoWindow({ 162 content : $marker.html() 163 }); 164 165 // show info window when marker is clicked 166 marker.addListener('mouseover', function() { 167 infowindow.open(map, this); 168 }); 169 marker.addListener('mouseout', function() { 170 infowindow.close(); 171 172 }); 173 174 } 175} 176 177/* 178* center_map 179* 180* This function will center the map, showing all markers attached to this map 181* 182* @type function 183* @date 8/11/2013 184* @since 4.3.0 185* 186* @param map (Google Map object) 187* @return n/a 188*/ 189 190function center_map( map ) { 191 192 // vars 193 var bounds = new google.maps.LatLngBounds(); 194 195 // loop through all markers and create bounds 196 $.each( map.markers, function( i, marker ){ 197 198 var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); 199 200 bounds.extend( latlng ); 201 202 }); 203 204 // only 1 marker? 205 if( map.markers.length == 1 ) 206 { 207 // set center of map 208 map.setCenter( bounds.getCenter() ); 209 map.setZoom( 16 ); 210 } 211 else 212 { 213 // fit to bounds 214 map.fitBounds( bounds ); 215 } 216 217} 218 219function filterMarkers(attributeValue) { 220 // First, clear all existing markers from the map 221 let markers = oms.getMarkers(); 222 // Loop through all markers in your array and check if they have the specified attribute value 223 for (let i = 0; i < markers.length; i++) { 224 225 let marker = markers[i]; 226 marker.setVisible(false); 227 if (marker.type === attributeValue) { 228 // If the marker has the specified attribute value, add it to the map 229 marker.setVisible(true); 230 } 231 } 232} 233function showAllMarkers() { 234 let markers = oms.getMarkers(); 235 for (let i = 0; i < markers.length; i++) { 236 let marker = markers[i]; 237 marker.setVisible(true); 238 } 239} 240 241 242})(jQuery)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.