Added selected marker image options

bjorn2404 · bjorn2404 · commit 22685b377bc0 · 2016-01-20T00:01:57.000-06:00
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-storelocator-plugin",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.",
   "repository": {
     "type": "git",
diff --git a/dist/assets/js/plugins/storeLocator/jquery.storelocator.js b/dist/assets/js/plugins/storeLocator/jquery.storelocator.js
@@ -1,6 +1,6 @@
-/*! jQuery Google Maps Store Locator - v2.3.3 - 2015-12-22
+/*! jQuery Google Maps Store Locator - v2.3.4 - 2016-01-20
 * http://www.bjornblog.com/web/jquery-store-locator-plugin
-* Copyright (c) 2015 Bjorn Holine; Licensed MIT */
+* Copyright (c) 2016 Bjorn Holine; Licensed MIT */
 
 ;(function ($, window, document, undefined) {
 	'use strict';
@@ -13,7 +13,7 @@
 	}
 
 	// Variables used across multiple methods
-	var $this, listTemplate, infowindowTemplate, dataTypeRead, originalOrigin, originalData, originalZoom, dataRequest, searchInput, addressInput, olat, olng, storeNum, directionsDisplay, directionsService;
+	var $this, listTemplate, infowindowTemplate, dataTypeRead, originalOrigin, originalData, originalZoom, dataRequest, searchInput, addressInput, olat, olng, storeNum, directionsDisplay, directionsService, prevSelectedMarkerBefore, prevSelectedMarkerAfter;
 	var featuredset = [], locationset = [], normalset = [], markers = [];
 	var filters = {}, locationData = {}, GeoCodeCalc = {}, mappingObj = {};
 
@@ -32,6 +32,8 @@
 		'markerImg'                : null,
 		'markerDim'                : null,
 		'catMarkers'               : null,
+		'selectedMarkerImg'        : null,
+		'selectedMarkerImgDim'     : null,
 		'lengthUnit'               : 'm',
 		'storeLimit'               : 26,
 		'distanceAlert'            : 60,
@@ -1031,6 +1033,35 @@
 			$('.' + this.settings.locationList + ' ul').append(listHtml);
 		},
 
+		/**
+		 * Change the selected marker image
+		 * 
+		 * @param marker {Object} Google Maps marker object
+		 */
+		changeSelectedMarker: function (marker) {
+			var markerImg;
+
+			// Reset the previously selected marker
+			if ( typeof prevSelectedMarkerAfter !== 'undefined' ) {
+				prevSelectedMarkerAfter.setIcon( prevSelectedMarkerBefore );
+			}
+
+			// Change the selected marker icon
+			if(this.settings.selectedMarkerImgDim === null) {
+				markerImg = this.markerImage(this.settings.selectedMarkerImg);
+			} else {
+				markerImg = this.markerImage(this.settings.selectedMarkerImg, this.settings.selectedMarkerImgDim.width, this.settings.selectedMarkerImgDim.height);
+			}
+
+			// Save the marker before switching it
+			prevSelectedMarkerBefore = marker.icon;
+
+			marker.setIcon( markerImg );
+
+			// Save the marker to a variable so it can be reverted when another marker is clicked
+			prevSelectedMarkerAfter = marker;
+		},
+
 		/**
 		 * Create the infowindow
 		 *
@@ -1076,6 +1107,11 @@
 					$container.animate({
 						scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
 					});
+
+					// Custom selected marker override
+					if(_this.settings.selectedMarkerImg !== null) {
+						_this.changeSelectedMarker(marker);
+					}
 				});
 			}
 		},
@@ -2108,6 +2144,11 @@
 				else {
 					_this.createInfowindow(selectedMarker, listLoc, infowindow, storeStart, page);
 				}
+
+				// Custom selected marker override
+				if(_this.settings.selectedMarkerImg !== null) {
+					_this.changeSelectedMarker(selectedMarker);
+				}
 			});
 
 			// Prevent bubbling from list content links
diff --git a/dist/assets/js/plugins/storeLocator/jquery.storelocator.min.js b/dist/assets/js/plugins/storeLocator/jquery.storelocator.min.js
diff --git a/options.md b/options.md
@@ -10,6 +10,8 @@
 | markerImg | null | Replacement marker image used for all locations |
 | markerDim | null | Replacement marker dimensions object - ex value: { height: 20, width: 20 } |
 | catMarkers | null | Multiple replacement marker images based on categories object. Value should be array with image path followed by dimensions - ex value: catMarkers : {'Restaurant' : ['img/red-marker.svg', 32, 32]}
+| selectedMarkerImg | null | Selected marker image. |
+| selectedMarkerImgDim | null | Selected marker image dimensions object - ex value: { height: 20, width: 20 } |
 | lengthUnit | 'm' | The unit of length. Default is m for miles, change to km for kilometers. |
 | storeLimit | 26 | The number of closest locations displayed at one time. Set to -1 for unlimited. |
 | distanceAlert | 60 | Displays alert if there are no locations with 60 m/km of the user's location. Set to -1 to disable. |
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-storelocator-plugin",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.",
   "repository": {
     "type": "git",
diff --git a/readme.md b/readme.md
@@ -35,6 +35,10 @@ filtering.
 
 ## Changelog
 
+### Version 2.3.4
+
+* Added new selected marker image options to highlight clicked marker.
+
 ### Version 2.3.3
 
 * Removed code that temporarily hid the map and results, when there are no results, in favor of just displaying the no 
diff --git a/src/js/jquery.storelocator.js b/src/js/jquery.storelocator.js
@@ -10,7 +10,7 @@
 	}
 
 	// Variables used across multiple methods
-	var $this, listTemplate, infowindowTemplate, dataTypeRead, originalOrigin, originalData, originalZoom, dataRequest, searchInput, addressInput, olat, olng, storeNum, directionsDisplay, directionsService;
+	var $this, listTemplate, infowindowTemplate, dataTypeRead, originalOrigin, originalData, originalZoom, dataRequest, searchInput, addressInput, olat, olng, storeNum, directionsDisplay, directionsService, prevSelectedMarkerBefore, prevSelectedMarkerAfter;
 	var featuredset = [], locationset = [], normalset = [], markers = [];
 	var filters = {}, locationData = {}, GeoCodeCalc = {}, mappingObj = {};
 
@@ -29,6 +29,8 @@
 		'markerImg'                : null,
 		'markerDim'                : null,
 		'catMarkers'               : null,
+		'selectedMarkerImg'        : null,
+		'selectedMarkerImgDim'     : null,
 		'lengthUnit'               : 'm',
 		'storeLimit'               : 26,
 		'distanceAlert'            : 60,
@@ -1028,6 +1030,35 @@
 			$('.' + this.settings.locationList + ' ul').append(listHtml);
 		},
 
+		/**
+		 * Change the selected marker image
+		 * 
+		 * @param marker {Object} Google Maps marker object
+		 */
+		changeSelectedMarker: function (marker) {
+			var markerImg;
+
+			// Reset the previously selected marker
+			if ( typeof prevSelectedMarkerAfter !== 'undefined' ) {
+				prevSelectedMarkerAfter.setIcon( prevSelectedMarkerBefore );
+			}
+
+			// Change the selected marker icon
+			if(this.settings.selectedMarkerImgDim === null) {
+				markerImg = this.markerImage(this.settings.selectedMarkerImg);
+			} else {
+				markerImg = this.markerImage(this.settings.selectedMarkerImg, this.settings.selectedMarkerImgDim.width, this.settings.selectedMarkerImgDim.height);
+			}
+
+			// Save the marker before switching it
+			prevSelectedMarkerBefore = marker.icon;
+
+			marker.setIcon( markerImg );
+
+			// Save the marker to a variable so it can be reverted when another marker is clicked
+			prevSelectedMarkerAfter = marker;
+		},
+
 		/**
 		 * Create the infowindow
 		 *
@@ -1073,6 +1104,11 @@
 					$container.animate({
 						scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
 					});
+
+					// Custom selected marker override
+					if(_this.settings.selectedMarkerImg !== null) {
+						_this.changeSelectedMarker(marker);
+					}
 				});
 			}
 		},
@@ -2105,6 +2141,11 @@
 				else {
 					_this.createInfowindow(selectedMarker, listLoc, infowindow, storeStart, page);
 				}
+
+				// Custom selected marker override
+				if(_this.settings.selectedMarkerImg !== null) {
+					_this.changeSelectedMarker(selectedMarker);
+				}
 			});
 
 			// Prevent bubbling from list content links
diff --git a/storelocator.jquery.json b/storelocator.jquery.json
@@ -3,7 +3,7 @@
     "title": "jQuery Google Maps Store Locator",
     "description": "This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.",
     "keywords": ["jquery","locator","store", "location", "locations", "maps", "map", "stores", "find"],
-    "version": "2.3.3",
+    "version": "2.3.4",
     "author": {
         "name": "Bjorn Holine",
         "url": "http://www.bjornblog.com/"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jquery-storelocator-plugin",`
`3`		`- "version": "2.3.3",`
	`3`	`+ "version": "2.3.4",`
`4`	`4`	`"description": "This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`