Added Google Places autocomplete option and example

bjorn2404 · bjorn2404 · commit 86cca3ce1b8d · 2016-01-20T08:13:49.000-06:00
diff --git a/dist/assets/js/plugins/storeLocator/jquery.storelocator.js b/dist/assets/js/plugins/storeLocator/jquery.storelocator.js
@@ -56,6 +56,7 @@
 		'defaultLoc'               : false,
 		'defaultLat'               : null,
 		'defaultLng'               : null,
+		'autoComplete'             : false,
 		'autoGeocode'              : false,
 		'maxDistance'              : false,
 		'maxDistanceID'            : 'bh-sl-maxdistance',
@@ -181,6 +182,16 @@
 				$('.' + this.settings.overlay).hide();
 			}
 
+			// Set up Google Places autocomplete if it's set to true
+			if (this.settings.autoComplete === true) {
+				var _this = this;
+				var searchInput = document.getElementById(this.settings.addressID);
+				var autoPlaces = new google.maps.places.Autocomplete(searchInput);
+				autoPlaces.addListener('place_changed', function(){
+					_this.processForm(null);
+				});
+			}
+
 			// Load the templates and continue from there
 			this._loadTemplates();
 		},
@@ -487,7 +498,7 @@
 			var _this = this,
 					doAutoGeo = this.settings.autoGeocode,
 					latlng;
-
+			
 			// Full map blank start
 			if (_this.settings.fullMapStartBlank !== false) {
 				var $mapDiv = $('#' + _this.settings.mapID);
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/autocomplete-example.html b/dist/autocomplete-example.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Autocomplete Example</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" placeholder="" />
+			</div>
+
+			<button id="bh-sl-submit" type="submit">Submit</button>
+		</form>
+	</div>
+
+	<div id="bh-sl-map-container" class="bh-sl-map-container">
+		<div id="bh-sl-map" class="bh-sl-map"></div>
+		<div class="bh-sl-loc-list">
+			<ul class="list"></ul>
+		</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?libraries=places"></script> <!-- Note the extra query string parameter -->
+<script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
+<script>
+	$(function() {
+		$('#bh-sl-map-container').storeLocator({
+			'autoComplete': true
+		});
+	});
+</script>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -38,6 +38,7 @@ filtering.
 ### Version 2.3.4
 
 * Added new selected marker image options to highlight clicked marker.
+* Added Google Places autocomplete option and example.
 
 ### Version 2.3.3
 
diff --git a/src/js/jquery.storelocator.js b/src/js/jquery.storelocator.js
@@ -53,6 +53,7 @@
 		'defaultLoc'               : false,
 		'defaultLat'               : null,
 		'defaultLng'               : null,
+		'autoComplete'             : false,
 		'autoGeocode'              : false,
 		'maxDistance'              : false,
 		'maxDistanceID'            : 'bh-sl-maxdistance',
@@ -178,6 +179,16 @@
 				$('.' + this.settings.overlay).hide();
 			}
 
+			// Set up Google Places autocomplete if it's set to true
+			if (this.settings.autoComplete === true) {
+				var _this = this;
+				var searchInput = document.getElementById(this.settings.addressID);
+				var autoPlaces = new google.maps.places.Autocomplete(searchInput);
+				autoPlaces.addListener('place_changed', function(){
+					_this.processForm(null);
+				});
+			}
+
 			// Load the templates and continue from there
 			this._loadTemplates();
 		},
@@ -484,7 +495,7 @@
 			var _this = this,
 					doAutoGeo = this.settings.autoGeocode,
 					latlng;
-
+			
 			// Full map blank start
 			if (_this.settings.fullMapStartBlank !== false) {
 				var $mapDiv = $('#' + _this.settings.mapID);
