Changed letter marker setup and added letter color override setting

Author: bjorn2404

dist/assets/js/plugins/storeLocator/jquery.storelocator.js

@@ -1,4 +1,4 @@
-/*! jQuery Google Maps Store Locator - v2.6.3 - 2016-08-30
+/*! jQuery Google Maps Store Locator - v2.6.3 - 2016-09-07
 * http://www.bjornblog.com/web/jquery-store-locator-plugin
 * Copyright (c) 2016 Bjorn Holine; Licensed MIT */
 
@@ -31,6 +31,7 @@
 		},
 		'markerImg'                : null,
 		'markerDim'                : null,
+		'markerAlphaColor'         : '#000000',
 		'catMarkers'               : null,
 		'selectedMarkerImg'        : null,
 		'selectedMarkerImgDim'     : null,
@@ -91,7 +92,7 @@
 		'debug'                    : false,
 		'sessionStorage'           : false,
 		'markerCluster'            : null,
-		'infoBubble' : null,
+		'infoBubble'               : null,
 		'callbackNotify'           : null,
 		'callbackBeforeSend'       : null,
 		'callbackSuccess'          : null,
@@ -949,6 +950,7 @@
 			this.writeDebug('createMarker',arguments);
 			var marker, markerImg, letterMarkerImg;
 			var categories = [];
+			var _this = this;
 
 			// Custom multi-marker image override (different markers for different categories
 			if(this.settings.catMarkers !== null) {
@@ -984,7 +986,11 @@
 			}
 
 			// Create the default markers
-			if (this.settings.disableAlphaMarkers === true || this.settings.storeLimit === -1 || this.settings.storeLimit > 26 || this.settings.catMarkers !== null || this.settings.markerImg !== null || (this.settings.fullMapStart === true && firstRun === true && (isNaN(this.settings.fullMapStartListLimit) || this.settings.fullMapStartListLimit > 26 || this.settings.fullMapStartListLimit === -1))) {
+			if (this.settings.disableAlphaMarkers === true ||
+				this.settings.storeLimit === -1 ||
+				this.settings.storeLimit > 26 ||
+				this.settings.catMarkers !== null ||
+				(this.settings.fullMapStart === true && firstRun === true && (isNaN(this.settings.fullMapStartListLimit) || this.settings.fullMapStartListLimit > 26 || this.settings.fullMapStartListLimit === -1))) {
 				marker = new google.maps.Marker({
 					position : point,
 					map      : map,
@@ -993,17 +999,16 @@
 				});
 			}
 			else {
-				// Letter markers image
-				letterMarkerImg = {
-					url: 'https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=' + letter + '&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48'
-				};
-
 				// Letter markers
 				marker = new google.maps.Marker({
-					position : point,
+					draggable: false,
+					icon: markerImg, // Reverts to default marker if nothing is passed
 					map      : map,
-					icon     : letterMarkerImg,
-					draggable: false
+					label : {
+						text: letter,
+						color: _this.settings.markerAlphaColor
+					},
+					position : point
 				});
 			}
 

dist/assets/js/plugins/storeLocator/jquery.storelocator.min.js

@@ -8,6 +8,7 @@
 | regionID | 'bh-sl-region' | ID of the region select form field for country region biasing. |
 | mapSettings | { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP } | Google maps settings object. Add all settings including zoom and map type if overriding. Set zoom to 0 to automatically center and zoom to show all display markers on the map |
 | markerImg | null | Replacement marker image used for all locations |
+| markerAlphaColor | '#000000' | Marker letter color. |
 | 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. |

options.md

@@ -38,6 +38,7 @@ filtering.
 ### Version 2.6.3
 
 * Added [InfoBubble](https://github.com/googlemaps/js-info-bubble) support and example file.
+* Added markerAlphaColor setting to change the marker letter color.
 * Added query string parameter filter check so that results can be filtered with URL query strings.
 
 ### Version 2.6.2

readme.md

@@ -28,6 +28,7 @@
 		},
 		'markerImg'                : null,
 		'markerDim'                : null,
+		'markerAlphaColor'         : '#000000',
 		'catMarkers'               : null,
 		'selectedMarkerImg'        : null,
 		'selectedMarkerImgDim'     : null,
@@ -88,7 +89,7 @@
 		'debug'                    : false,
 		'sessionStorage'           : false,
 		'markerCluster'            : null,
-		'infoBubble' : null,
+		'infoBubble'               : null,
 		'callbackNotify'           : null,
 		'callbackBeforeSend'       : null,
 		'callbackSuccess'          : null,
@@ -946,6 +947,7 @@
 			this.writeDebug('createMarker',arguments);
 			var marker, markerImg, letterMarkerImg;
 			var categories = [];
+			var _this = this;
 
 			// Custom multi-marker image override (different markers for different categories
 			if(this.settings.catMarkers !== null) {
@@ -981,7 +983,11 @@
 			}
 
 			// Create the default markers
-			if (this.settings.disableAlphaMarkers === true || this.settings.storeLimit === -1 || this.settings.storeLimit > 26 || this.settings.catMarkers !== null || this.settings.markerImg !== null || (this.settings.fullMapStart === true && firstRun === true && (isNaN(this.settings.fullMapStartListLimit) || this.settings.fullMapStartListLimit > 26 || this.settings.fullMapStartListLimit === -1))) {
+			if (this.settings.disableAlphaMarkers === true ||
+				this.settings.storeLimit === -1 ||
+				this.settings.storeLimit > 26 ||
+				this.settings.catMarkers !== null ||
+				(this.settings.fullMapStart === true && firstRun === true && (isNaN(this.settings.fullMapStartListLimit) || this.settings.fullMapStartListLimit > 26 || this.settings.fullMapStartListLimit === -1))) {
 				marker = new google.maps.Marker({
 					position : point,
 					map      : map,
@@ -990,17 +996,16 @@
 				});
 			}
 			else {
-				// Letter markers image
-				letterMarkerImg = {
-					url: 'https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=' + letter + '&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48'
-				};
-
 				// Letter markers
 				marker = new google.maps.Marker({
-					position : point,
+					draggable: false,
+					icon: markerImg, // Reverts to default marker if nothing is passed
 					map      : map,
-					icon     : letterMarkerImg,
-					draggable: false
+					label : {
+						text: letter,
+						color: _this.settings.markerAlphaColor
+					},
+					position : point
 				});
 			}