Added fullMapStartBlank option and example

bjorn2404 · bjorn2404 · commit 82142fef1975 · 2015-12-09T21:22:32.000-06:00
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-storelocator-plugin",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "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,4 +1,4 @@
-/*! jQuery Google Maps Store Locator - v2.2.2 - 2015-11-30
+/*! jQuery Google Maps Store Locator - v2.2.2 - 2015-12-09
 * http://www.bjornblog.com/web/jquery-store-locator-plugin
 * Copyright (c) 2015 Bjorn Holine; Licensed MIT */
 
@@ -58,6 +58,7 @@
 		'maxDistance'              : false,
 		'maxDistanceID'            : 'bh-sl-maxdistance',
 		'fullMapStart'             : false,
+		'fullMapStartBlank'        : false,
 		'noForm'                   : false,
 		'loading'                  : false,
 		'loadingContainer'         : 'bh-sl-loading',
@@ -482,73 +483,100 @@
 		_start: function () {
 			this.writeDebug('_start');
 			var _this = this,
-					doAutoGeo = this.settings.autoGeocode;
-			// If a default location is set
-			if (this.settings.defaultLoc === true) {
-				// The address needs to be determined for the directions link
-				var r = new this.reverseGoogleGeocode(this);
-				var latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
-				r.geocode({'latLng': latlng}, function (data) {
-					if (data !== null) {
-						var originAddress = data.address;
-						mappingObj.lat = _this.settings.defaultLat;
-						mappingObj.lng = _this.settings.defaultLng;
-						mappingObj.origin = originAddress;
-						_this.mapping(mappingObj);
-					} else {
-						// Unable to geocode
-						_this.notify(_this.settings.addressErrorAlert);
-					}
-				});
-			}
+					doAutoGeo = this.settings.autoGeocode,
+					latlng;
+
+			// Full map blank start
+			if (_this.settings.fullMapStartBlank !== false) {
+				var $mapDiv = $('#' + _this.settings.mapID);
+				$mapDiv.addClass('bh-sl-map-open');
+				var myOptions = _this.settings.mapSettings;
+				myOptions.zoom = _this.settings.fullMapStartBlank;
+				
+				latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
+				myOptions.center = latlng;
 
+				// Create the map
+				var map = new google.maps.Map(document.getElementById(_this.settings.mapID), myOptions);
 
-			// If there is already have a value in the address bar
-			if ( $('#' + this.settings.addressID).val().trim() !== ''){
-				_this.writeDebug('Using Address Field');
-				_this.processForm(null);
-				doAutoGeo = false; // No need for additional processing
+				// Re-center the map when the browser is re-sized
+				google.maps.event.addDomListener(window, 'resize', function() {
+					var center = map.getCenter();
+					google.maps.event.trigger(map, 'resize');
+					map.setCenter(center);
+				});
+
+				// Only do this once
+				_this.settings.fullMapStartBlank = false;
+				myOptions.zoom = originalZoom;
 			}
-			// If show full map option is true
-			else if (this.settings.fullMapStart === true) {
-				if((this.settings.querystringParams === true && this.getQueryString(this.settings.addressID)) || (this.settings.querystringParams === true && this.getQueryString(this.settings.searchID)) || (this.settings.querystringParams === true && this.getQueryString(this.settings.maxDistanceID))) {
-					_this.writeDebug('Using Query String');
-					this.processForm(null);
+			else {
+				// If a default location is set
+				if (this.settings.defaultLoc === true) {
+					// The address needs to be determined for the directions link
+					var r = new this.reverseGoogleGeocode(this);
+					latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
+					r.geocode({'latLng': latlng}, function (data) {
+						if (data !== null) {
+							var originAddress = data.address;
+							mappingObj.lat = _this.settings.defaultLat;
+							mappingObj.lng = _this.settings.defaultLng;
+							mappingObj.origin = originAddress;
+							_this.mapping(mappingObj);
+						} else {
+							// Unable to geocode
+							_this.notify(_this.settings.addressErrorAlert);
+						}
+					});
+				}
+
+				// If there is already have a value in the address bar
+				if ( $('#' + this.settings.addressID).val().trim() !== ''){
+					_this.writeDebug('Using Address Field');
+					_this.processForm(null);
 					doAutoGeo = false; // No need for additional processing
 				}
-				else {
-					this.mapping(null);
+				// If show full map option is true
+				else if (this.settings.fullMapStart === true) {
+					if((this.settings.querystringParams === true && this.getQueryString(this.settings.addressID)) || (this.settings.querystringParams === true && this.getQueryString(this.settings.searchID)) || (this.settings.querystringParams === true && this.getQueryString(this.settings.maxDistanceID))) {
+						_this.writeDebug('Using Query String');
+						this.processForm(null);
+						doAutoGeo = false; // No need for additional processing
+					}
+					else {
+						this.mapping(null);
+					}
 				}
-			}
 
-			// HTML5 geolocation API option
-			if (this.settings.autoGeocode === true && doAutoGeo === true) {
-				_this.writeDebug('Auto Geo');
-				// Saved geo location (saves around 3-5 seconds)
-				if (_this.settings.sessionStorage === true && window.sessionStorage && window.sessionStorage.getItem('myGeo')){
-					_this.writeDebug('Using Session Saved Values for GEO');
-					_this.autoGeocodeQuery(JSON.parse(window.sessionStorage.getItem('myGeo')));
-					return false;
-				}
-				else if (navigator.geolocation) {
-					navigator.geolocation.getCurrentPosition(function(position){
-						_this.writeDebug('Current Position Result');
-						// To not break autoGeocodeQuery then we create the obj to match the geolocation format
-						var pos = {
-							coords: {
-								latitude : position.coords.latitude,
-								longitude: position.coords.longitude,
-								accuracy : position.coords.accuracy
+				// HTML5 geolocation API option
+				if (this.settings.autoGeocode === true && doAutoGeo === true) {
+					_this.writeDebug('Auto Geo');
+					// Saved geo location (saves around 3-5 seconds)
+					if (_this.settings.sessionStorage === true && window.sessionStorage && window.sessionStorage.getItem('myGeo')){
+						_this.writeDebug('Using Session Saved Values for GEO');
+						_this.autoGeocodeQuery(JSON.parse(window.sessionStorage.getItem('myGeo')));
+						return false;
+					}
+					else if (navigator.geolocation) {
+						navigator.geolocation.getCurrentPosition(function(position){
+							_this.writeDebug('Current Position Result');
+							// To not break autoGeocodeQuery then we create the obj to match the geolocation format
+							var pos = {
+								coords: {
+									latitude : position.coords.latitude,
+									longitude: position.coords.longitude,
+									accuracy : position.coords.accuracy
+								}
+							};
+							// Have to do this to get around scope issues
+							if (_this.settings.sessionStorage === true && window.sessionStorage) {
+								window.sessionStorage.setItem('myGeo',JSON.stringify(pos));
 							}
-						};
-						// Have to do this to get around scope issues
-						if (_this.settings.sessionStorage === true && window.sessionStorage) {
-							window.sessionStorage.setItem('myGeo',JSON.stringify(pos));
-						}
-						_this.autoGeocodeQuery(pos);
-					}, function(error){
-						_this._autoGeocodeError(error);
-					});
+							_this.autoGeocodeQuery(pos);
+						}, function(error){
+							_this._autoGeocodeError(error);
+						});
+					}
 				}
 			}
 		},
@@ -1633,7 +1661,7 @@
 				origin = mappingObject.origin;
 				page = mappingObject.page;
 			}
-
+			
 			// Set the initial page to zero if not set
 			if ( _this.settings.pagination === true ) {
 				if (typeof page === 'undefined' || originalOrigin !== addressInput ) {
@@ -1664,7 +1692,6 @@
 			if(_this.settings.taxonomyFilters !== null && _this.hasEmptyObjectVals(filters)) {
 				_this.checkFilters();
 			}
-
 			/**
 			 * Process the location data
 			 */
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/dist/fullmapstartblank-example.html b/dist/fullmapstartblank-example.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Map Example - fullMapStartBlank</title>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
+</head>
+
+<body>
+
+<div class="bh-sl-container">
+	<div id="page-header">
+		<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
+		<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
+			You can use just the city as the address - ex: Edina, MN.</p>
+	</div>
+
+	<div class="bh-sl-form-container">
+		<form id="bh-sl-user-location" method="post" action="#">
+			<div class="form-input">
+				<label for="bh-sl-address">Enter Address or Zip Code:</label>
+				<input type="text" id="bh-sl-address" name="bh-sl-address" />
+			</div>
+
+			<button id="bh-sl-submit" type="submit">Submit</button>
+		</form>
+	</div>
+
+	<div id="map-container" class="bh-sl-map-container">
+		<div class="bh-sl-loc-list">
+			<ul class="list"></ul>
+		</div>
+		<div id="bh-sl-map" class="bh-sl-map"></div>
+	</div>
+</div>
+
+<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+<script src="assets/js/libs/handlebars.min.js"></script>
+<script src="http://maps.google.com/maps/api/js"></script>
+<script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
+<script>
+	$(function() {
+		$('#map-container').storeLocator({
+			'fullMapStartBlank': 3,
+			'slideMap': false,
+			'defaultLoc': true,
+			'defaultLat': 43.9695148,
+			'defaultLng': -99.9018131,
+		});
+	});
+</script>
+
+</body>
+</html>
diff --git a/options.md b/options.md
@@ -36,6 +36,7 @@
 | maxDistance | false | Set to true if you want to give users an option to limit the distance from their location to the markers. |
 | maxDistanceID | 'bh-sl-maxdistance' | ID of the select element for the maximum distance options. |
 | fullMapStart | false | Set to true if you want to immediately show a map of all locations. The map will center and zoom automatically. |
+| fullMapStartBlank | false | Set to a zoom integer if you want to immediately show a blank map without any locations. |
 | noForm | false | Set to true if you aren't able to use form tags (ASP.net WebForms). |
 | loading | false | Set to true to display a loading animated gif next to the submit button. |
 | loadingContainer | 'bh-sl-loading' | Class of element container that displays the loading animated gif. |
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-storelocator-plugin",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "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
@@ -27,6 +27,13 @@ for even faster loading.
 
 ## Changelog
 
+### Version 2.3.0
+
+* Added fullMapStartBlank option to show a blank map without any locations initially. Set this setting to an integer, 
+which will be applied as the initial Google Maps zoom value and will then fall back to the mapSettings zoom level after
+a serach is performed.
+* Added fullMapStartBlank example file.
+
 ### Version 2.2.2
 
 * Added preventative styling to avoid table conflicts with directions panel.
diff --git a/src/js/jquery.storelocator.js b/src/js/jquery.storelocator.js
diff --git a/storelocator.jquery.json b/storelocator.jquery.json

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.2.2",`
	`3`	`+ "version": "2.3.0",`
`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",`