1/* 2 * Project: Plot Views results on a Google Map 3 * Author: OnTheGoSystems http://wp-types.com/ 4 * Version: Pre-release V1.0 - Updated 11/12/2013 5 */ 6/* 7 * Adds Views results to a Google Map. Will take as input to plot:- 8 * 1. A views listing (the most normal output) 9 * 2. A views js array output (where your View does not generate visible output) 10 * 3. A single plot item on the page (normally for Content templates) 11 * 12 * To use: 13 * Create a <div id="myMapContainer"></div> on your page where the map 14 * is to be displayed. Give it an id. 15 * Add the following javascript to your page, you can add this to the 16 * js section of your View or Content Template. 17 * 18 * $( document ).ready(function() { 19 * $("#myMapContainer").wpvmap(); 20 * }); 21 * 22 * You can change any of the defaults below, by setting them when you 23 * call the plugin. 24 * 25 * $("#myMapContainer").wpvmap( { 26 * iconPath : "/wp-content/themes/toolset-bootstrap-child/markers/", 27 * iconImage : "icon.png", 28 * iconImageHover : "icon-selected.png" 29 * }); 30 * 31 * ***** More information ***** 32 * 33 * jQuery plugin template, based on - http://jqueryboilerplate.com/ - thanks guys! 34 * Detailed documentation : http://wp-types.com/documentation/user-guides/map-wordpress-posts/ 35 * 36 */ 37 ;(function ( $, window, document, undefined ) { 38 var pluginName = "wpvmap", 39 defaults = { 40 generalMapZoom: 8, // Zoom level for map views 41 centerLat: 0,centerLon: 0, // Default map centre 42 mapType : google.maps.MapTypeId.ROADMAP, // Default map type - ROADMAP 43 fitBounds : true, // Fit to bounds on display of multiple points map 44 centerMarker: true, // Center on marker for single point map 45 singleMapZoom : 14, // Zoom level for single map views 46 hideBusinessListings : true, // Hide Google business listings on map (points of interest layer) */ 47 infoWindow : ".js-map-infowindow-html", // Element selector for infoWindow hmtl content 48 centerMapLink : ".js-map-fitbounds", // Element selector for center map link/button 49 singleContainer: "#js-map-element", // ID selector of the Single element container 50 listContainer : "#js-map-elements", // ID selector of the Views container - by default we expect an ol or ul 51 listItem : "li", // Item container - this contains the item to plot on the map
52 locateOnMapLink : ".js-map-center-map", // Element selector for "zoom to this items marker" link/button. 53 viewsArray : "otgLocations", // Name of the Views js array 54 notPlottedClass : "map-not-plotted", // If co-ordinates are not valid, this class will be added to DOM 55 iconPath : "", // Absolute or relative paths to marker icons 56 iconImage : "", // Marker icon filename (defaults to google default marker) 57 iconImageHover : "", // Marker icon to display on hover over list item - hover disabled if not set 58 hoverClass : "map-dom-hover", // Class added to list items on hover 59 mapPlotType : 0 // 0 = default, 1=Map with View elements, 2=Map with single element, 3=Map with JavaScript array 60 // normally this only needs to be set if there are multiple maps on the page. 61 }; 62 63 64 // The actual plugin constructor 65 function Plugin ( element, options ) { 66 this.element = element; 67 this.settings = $.extend( {}, defaults, options ); // Extend defaults with user supply settings 68 this._defaults = defaults; 69 this._name = pluginName; 70 this.init(); 71 } 72 Plugin.prototype = { 73 init: function () { 74 var map = null, 75 gmarkers=[], 76 bounds = new google.maps.LatLngBounds(), 77 infowindow = new google.maps.InfoWindow(), 78 $domItems, 79 $singleElement, 80 centerMode,cBounds="bounds",cCenter="center",cSingle="single", 81 settings=this.settings, 82 $mapContainer=$('#'+this.element.id); 83 /** 84 * *** Create map *** 85 * We won't display anything just yet . this will happen after we plot points 86 **/ 87 function createMap() { 88 var mapOptions = { 89 zoom: settings.generalMapZoom, 90 center: new google.maps.LatLng(settings.centerLat, settings.centerLon), 91 mapTypeId: settings.mapType 92 }; 93 map = new google.maps.Map($mapContainer[0], mapOptions); 94 // We don't want the business layer to be displayed (this can be change in options) 95 if (settings.hideBusinessListings) { 96 map.setOptions({styles: [{featureType: "poi.business", stylers: [{ visibility: "off" }] }]}); 97 } 98 } 99 /** 100 * *** Check numeric *** 101 * http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric 102 * 103 **/ 104 function isNumber(n) { 105 return !isNaN(parseFloat(n)) && isFinite(n); 106 } 107 /** 108 * *** Get point data and plot *** 109 * One of the following is passed as points: 110 * 1. jQUery object array of DOM elements with data-* attributes 111 * 2. Single jQuery object DOM element as above 112 * 3. Javascript array of point objects 113 **/ 114 function getPointData (points,pointArray) { // pointArray is only defined if we have js array of points 115 var pointData,title,html,latlng,infoWindowHTML; 116 $.each(points,function(index) { 117 //If we are processing the DOM - retrieve all data-* attributes from the element 118 //If we are processing an array, then all points are on the object 119 pointData =(pointArray !== undefined) ? pointData=this : pointData=$(this).data(); 120 // Only plot if lat, lon are valid https://developers.google.com/maps/documentation/javascript/reference?hl=en#LatLng 121 if ((isNumber(pointData.markerLat) && pointData.markerLat >= -90 && pointData.markerLat <= 90) && 122 (isNumber(pointData.markerLon) && pointData.markerLon >= -180 && pointData.markerLon <= 180)) { 123 //Set the infoWindow HTML from a data attribute or from the contents of a specified DOM element 124 infoWindowHTML=(pointData.markerHtml===undefined) ? $(settings.infoWindow,this).html() : pointData.markerHtml; 125 plotPoint(pointData,infoWindowHTML); 126 } else { 127 // No point to plot - if this is not an array of points, add a class to the dom element to indicate not plotted 128 $(this).addClass(settings.notPlottedClass); 129 } 130 }); 131 } 132 /** 133 * *** Plot point on map *** 134 * Create marker, set infoWindow listener 135 **/ 136 function plotPoint(pointData,infoWindowHTML) { 137 var latlng=new google.maps.LatLng(pointData.markerLat, pointData.markerLon); 138 var markerOptions={ 139 map: map, 140 position: latlng 141 }; 142 if (pointData.markerTitle!==undefined) {markerOptions.title=pointData.markerTitle;} 143 if (settings.iconImage.length>0) {markerOptions.icon=settings.iconPath+settings.iconImage;} 144 var marker= new google.maps.Marker(markerOptions); 145 //If no ID is available then we are processing a single marker - save the marker in the 0 index of the array 146 //We'll use this later for centering the map 147 var index=(pointData.markerId===undefined)? 0 : pointData.markerId; 148 gmarkers[index]=marker; /* Store markers in an array indexed by property post id */ 149 if (infoWindowHTML!==undefined) { 150 /* Add listener to display marker info window on click */ 151 google.maps.event.addListener(marker, 'click', function() { 152 infowindow.setContent(infoWindowHTML); 153 infowindow.open(map,marker); 154 }); 155 } 156 /* Create a bounds for the map to allow zoom and fit all markers */ 157 if(settings.fitBounds) {bounds.extend(latlng);} 158 } 159 /** 160 * *** Center map *** 161 **/ 162 function centerMap(mode) { 163 switch (mode) {
164 case cBounds: //Fit to bounds (zoom to display all markers) 165 if (!bounds.isEmpty()){ //If no bounds then fall through to default 166 map.fitBounds(bounds); 167 } 168 break; 169 case cSingle: // Center on the single marker 170 if ( gmarkers.length > 0 ) { // If there are markers, first check if not all are empty because they are added to the marker-id index 171 var real_markers = jQuery.grep(gmarkers,function(n){ return(n) }); 172 if (real_markers[0]!==undefined) { //No marker!! Fall through to default 173 map.setCenter(real_markers[0].getPosition()); 174 } 175 } 176 break; 177 } 178 } 179 /** 180 * *** Set events for Views list items *** 181 * Set class on hover over list item 182 * Change marker color on hover 183 * Bind center on item link to list item 184 **/ 185 function setListItemEvents($listItems) { 186 if (settings.iconImageHover.length > 0) { 187 /* Change property icon (color) when user hovers over list item */ 188 $listItems.hover( 189 function() { 190 var id=$(this).data("marker-id"), 191 zindex; 192 if (id!==undefined) { 193 if (!$(this).hasClass(settings.notPlottedClass)) { //We don't have marker for this list item 194 gmarkers[id].setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 195 gmarkers[id].setIcon(settings.iconPath+settings.iconImageHover); 196 } 197 $(this).addClass(settings.hoverClass); 198 } 199 }, function() { 200 var id=$(this).data("marker-id"); 201 if (id!==undefined) { 202 if (!$(this).hasClass(settings.notPlottedClass)) { //We don't have marker for this list item 203 gmarkers[id].setIcon(settings.iconPath+settings.iconImage); 204 } 205 $(this).removeClass(settings.hoverClass); 206 } 207 } 208 ); 209 } 210 /* Center map on selected property and zoom in */ 211 /* Center link must be inside $domElementContainer */
212 if (settings.locateOnMapLink.length > 0 && $listItems.find(settings.locateOnMapLink).length > 0) { 213 $listItems.find(settings.locateOnMapLink).click(function(event) { 214 event.preventDefault(); 215 var $itemContainer=$(this).parents(settings.listContainer+" "+settings.listItem); //Get the parent container (with our data- and classes) 216 if (!$itemContainer.hasClass(settings.notPlottedClass)) { //We don't have marker for this list item 217 var id=$itemContainer.data("marker-id"); 218 if (id!==undefined) { 219 map.setCenter(gmarkers[id].getPosition()); 220 map.setZoom(settings.singleMapZoom); 221 } 222 } 223 }); 224 } 225 } 226 // If there is a center link on the page - then bind a center map event to it 227 function centerEvent(mode) { 228 var centerLink=$(settings.centerMapLink); 229 if (centerLink.length>0) { 230 centerLink.click(function(event) { 231 event.preventDefault(); 232 centerMap(mode); 233 }); 234 } 235 } 236 /** 237 * *** Main processing *** 238 * There are three types of data we can plot 239 * Data associated with a View item in the DOM 240 * A single point (normally for a detail view) 241 * A JavaScript array of points 242 * 243 * We can normally recognise which type we have by looking for the container on the page 244 * however if there are multiple maps on the page, there exists the option to pass a variable 245 * mapPlotType (see in defaults above for details) to specify the map type 246 **/ 247 // Are there are view items to map? 248 $domItems=$(settings.listContainer+" "+settings.listItem); 249 if ($domItems.length!==0 && (settings.mapPlotType == 0 || settings.mapPlotType == 1 )) { 250 createMap(); // Setup the map object 251 getPointData($domItems); // Process points and plot markers 252 centerMode=(settings.fitBounds)?cBounds:cCenter; 253 centerMap(centerMode); 254 setListItemEvents($domItems);
255 centerEvent(centerMode); 256 } else { 257 //Is there are a single view item to map? 258 $singleElement=$(settings.singleContainer); 259 if ($singleElement.length!==0 && (settings.mapPlotType == 0 || settings.mapPlotType == 2 )) { 260 createMap(); 261 getPointData($singleElement); 262 centerMode=(settings.centerMarker)? cSingle:cCenter; 263 centerMap(centerMode); 264 } else { 265 //Is there a JavaScript array of values to map? 266 if ((typeof settings.viewsArray !== undefined && typeof window[settings.viewsArray] !== undefined && window[settings.viewsArray].length>0 )&& (settings.mapPlotType == 0 || settings.mapPlotType == 3 )) { 267 createMap(); 268 getPointData(window[settings.viewsArray],true); //window[] - converts string name to a variable. 269 centerMode=(settings.fitBounds)? cBounds : cCenter; 270 centerMap(centerMode); 271 centerEvent(centerMode); 272 } else { 273 //We didn't find anything to map on the page, just create a map in the map container 274 createMap(); 275 centerMap(cCenter); 276 } 277 } 278 } 279 return this; 280 } 281 }; 282 // A really lightweight plugin wrapper around the constructor, 283 // preventing against multiple instantiations 284 $.fn[ pluginName ] = function ( options ) { 285 return this.each(function() { 286 if ( !$.data( this, "plugin_" + pluginName ) ) { 287 $.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); 288 } 289 }); 290 }; 291})( jQuery, window, document );
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.