Skip to content

Commit 82142fe

Browse files
bjorn2404bjorn2404
committed
Added fullMapStartBlank option and example
1 parent 056c734 commit 82142fe

9 files changed

+244
-128
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-storelocator-plugin",
3-
"version": "2.2.2",
3+
"version": "2.3.0",
44
"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.",
55
"repository": {
66
"type": "git",

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

+89-62
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! jQuery Google Maps Store Locator - v2.2.2 - 2015-11-30
1+
/*! jQuery Google Maps Store Locator - v2.2.2 - 2015-12-09
22
* http://www.bjornblog.com/web/jquery-store-locator-plugin
33
* Copyright (c) 2015 Bjorn Holine; Licensed MIT */
44

@@ -58,6 +58,7 @@
5858
'maxDistance' : false,
5959
'maxDistanceID' : 'bh-sl-maxdistance',
6060
'fullMapStart' : false,
61+
'fullMapStartBlank' : false,
6162
'noForm' : false,
6263
'loading' : false,
6364
'loadingContainer' : 'bh-sl-loading',
@@ -482,73 +483,100 @@
482483
_start: function () {
483484
this.writeDebug('_start');
484485
var _this = this,
485-
doAutoGeo = this.settings.autoGeocode;
486-
// If a default location is set
487-
if (this.settings.defaultLoc === true) {
488-
// The address needs to be determined for the directions link
489-
var r = new this.reverseGoogleGeocode(this);
490-
var latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
491-
r.geocode({'latLng': latlng}, function (data) {
492-
if (data !== null) {
493-
var originAddress = data.address;
494-
mappingObj.lat = _this.settings.defaultLat;
495-
mappingObj.lng = _this.settings.defaultLng;
496-
mappingObj.origin = originAddress;
497-
_this.mapping(mappingObj);
498-
} else {
499-
// Unable to geocode
500-
_this.notify(_this.settings.addressErrorAlert);
501-
}
502-
});
503-
}
486+
doAutoGeo = this.settings.autoGeocode,
487+
latlng;
488+
489+
// Full map blank start
490+
if (_this.settings.fullMapStartBlank !== false) {
491+
var $mapDiv = $('#' + _this.settings.mapID);
492+
$mapDiv.addClass('bh-sl-map-open');
493+
var myOptions = _this.settings.mapSettings;
494+
myOptions.zoom = _this.settings.fullMapStartBlank;
495+
496+
latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
497+
myOptions.center = latlng;
504498

499+
// Create the map
500+
var map = new google.maps.Map(document.getElementById(_this.settings.mapID), myOptions);
505501

506-
// If there is already have a value in the address bar
507-
if ( $('#' + this.settings.addressID).val().trim() !== ''){
508-
_this.writeDebug('Using Address Field');
509-
_this.processForm(null);
510-
doAutoGeo = false; // No need for additional processing
502+
// Re-center the map when the browser is re-sized
503+
google.maps.event.addDomListener(window, 'resize', function() {
504+
var center = map.getCenter();
505+
google.maps.event.trigger(map, 'resize');
506+
map.setCenter(center);
507+
});
508+
509+
// Only do this once
510+
_this.settings.fullMapStartBlank = false;
511+
myOptions.zoom = originalZoom;
511512
}
512-
// If show full map option is true
513-
else if (this.settings.fullMapStart === true) {
514-
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))) {
515-
_this.writeDebug('Using Query String');
516-
this.processForm(null);
513+
else {
514+
// If a default location is set
515+
if (this.settings.defaultLoc === true) {
516+
// The address needs to be determined for the directions link
517+
var r = new this.reverseGoogleGeocode(this);
518+
latlng = new google.maps.LatLng(this.settings.defaultLat, this.settings.defaultLng);
519+
r.geocode({'latLng': latlng}, function (data) {
520+
if (data !== null) {
521+
var originAddress = data.address;
522+
mappingObj.lat = _this.settings.defaultLat;
523+
mappingObj.lng = _this.settings.defaultLng;
524+
mappingObj.origin = originAddress;
525+
_this.mapping(mappingObj);
526+
} else {
527+
// Unable to geocode
528+
_this.notify(_this.settings.addressErrorAlert);
529+
}
530+
});
531+
}
532+
533+
// If there is already have a value in the address bar
534+
if ( $('#' + this.settings.addressID).val().trim() !== ''){
535+
_this.writeDebug('Using Address Field');
536+
_this.processForm(null);
517537
doAutoGeo = false; // No need for additional processing
518538
}
519-
else {
520-
this.mapping(null);
539+
// If show full map option is true
540+
else if (this.settings.fullMapStart === true) {
541+
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))) {
542+
_this.writeDebug('Using Query String');
543+
this.processForm(null);
544+
doAutoGeo = false; // No need for additional processing
545+
}
546+
else {
547+
this.mapping(null);
548+
}
521549
}
522-
}
523550

524-
// HTML5 geolocation API option
525-
if (this.settings.autoGeocode === true && doAutoGeo === true) {
526-
_this.writeDebug('Auto Geo');
527-
// Saved geo location (saves around 3-5 seconds)
528-
if (_this.settings.sessionStorage === true && window.sessionStorage && window.sessionStorage.getItem('myGeo')){
529-
_this.writeDebug('Using Session Saved Values for GEO');
530-
_this.autoGeocodeQuery(JSON.parse(window.sessionStorage.getItem('myGeo')));
531-
return false;
532-
}
533-
else if (navigator.geolocation) {
534-
navigator.geolocation.getCurrentPosition(function(position){
535-
_this.writeDebug('Current Position Result');
536-
// To not break autoGeocodeQuery then we create the obj to match the geolocation format
537-
var pos = {
538-
coords: {
539-
latitude : position.coords.latitude,
540-
longitude: position.coords.longitude,
541-
accuracy : position.coords.accuracy
551+
// HTML5 geolocation API option
552+
if (this.settings.autoGeocode === true && doAutoGeo === true) {
553+
_this.writeDebug('Auto Geo');
554+
// Saved geo location (saves around 3-5 seconds)
555+
if (_this.settings.sessionStorage === true && window.sessionStorage && window.sessionStorage.getItem('myGeo')){
556+
_this.writeDebug('Using Session Saved Values for GEO');
557+
_this.autoGeocodeQuery(JSON.parse(window.sessionStorage.getItem('myGeo')));
558+
return false;
559+
}
560+
else if (navigator.geolocation) {
561+
navigator.geolocation.getCurrentPosition(function(position){
562+
_this.writeDebug('Current Position Result');
563+
// To not break autoGeocodeQuery then we create the obj to match the geolocation format
564+
var pos = {
565+
coords: {
566+
latitude : position.coords.latitude,
567+
longitude: position.coords.longitude,
568+
accuracy : position.coords.accuracy
569+
}
570+
};
571+
// Have to do this to get around scope issues
572+
if (_this.settings.sessionStorage === true && window.sessionStorage) {
573+
window.sessionStorage.setItem('myGeo',JSON.stringify(pos));
542574
}
543-
};
544-
// Have to do this to get around scope issues
545-
if (_this.settings.sessionStorage === true && window.sessionStorage) {
546-
window.sessionStorage.setItem('myGeo',JSON.stringify(pos));
547-
}
548-
_this.autoGeocodeQuery(pos);
549-
}, function(error){
550-
_this._autoGeocodeError(error);
551-
});
575+
_this.autoGeocodeQuery(pos);
576+
}, function(error){
577+
_this._autoGeocodeError(error);
578+
});
579+
}
552580
}
553581
}
554582
},
@@ -1633,7 +1661,7 @@
16331661
origin = mappingObject.origin;
16341662
page = mappingObject.page;
16351663
}
1636-
1664+
16371665
// Set the initial page to zero if not set
16381666
if ( _this.settings.pagination === true ) {
16391667
if (typeof page === 'undefined' || originalOrigin !== addressInput ) {
@@ -1664,7 +1692,6 @@
16641692
if(_this.settings.taxonomyFilters !== null && _this.hasEmptyObjectVals(filters)) {
16651693
_this.checkFilters();
16661694
}
1667-
16681695
/**
16691696
* Process the location data
16701697
*/

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

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/fullmapstartblank-example.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Map Example - fullMapStartBlank</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
7+
</head>
8+
9+
<body>
10+
11+
<div class="bh-sl-container">
12+
<div id="page-header">
13+
<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
14+
<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.
15+
You can use just the city as the address - ex: Edina, MN.</p>
16+
</div>
17+
18+
<div class="bh-sl-form-container">
19+
<form id="bh-sl-user-location" method="post" action="#">
20+
<div class="form-input">
21+
<label for="bh-sl-address">Enter Address or Zip Code:</label>
22+
<input type="text" id="bh-sl-address" name="bh-sl-address" />
23+
</div>
24+
25+
<button id="bh-sl-submit" type="submit">Submit</button>
26+
</form>
27+
</div>
28+
29+
<div id="map-container" class="bh-sl-map-container">
30+
<div class="bh-sl-loc-list">
31+
<ul class="list"></ul>
32+
</div>
33+
<div id="bh-sl-map" class="bh-sl-map"></div>
34+
</div>
35+
</div>
36+
37+
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
38+
<script src="assets/js/libs/handlebars.min.js"></script>
39+
<script src="http://maps.google.com/maps/api/js"></script>
40+
<script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
41+
<script>
42+
$(function() {
43+
$('#map-container').storeLocator({
44+
'fullMapStartBlank': 3,
45+
'slideMap': false,
46+
'defaultLoc': true,
47+
'defaultLat': 43.9695148,
48+
'defaultLng': -99.9018131,
49+
});
50+
});
51+
</script>
52+
53+
</body>
54+
</html>

‎options.md

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
| maxDistance | false | Set to true if you want to give users an option to limit the distance from their location to the markers. |
3737
| maxDistanceID | 'bh-sl-maxdistance' | ID of the select element for the maximum distance options. |
3838
| fullMapStart | false | Set to true if you want to immediately show a map of all locations. The map will center and zoom automatically. |
39+
| fullMapStartBlank | false | Set to a zoom integer if you want to immediately show a blank map without any locations. |
3940
| noForm | false | Set to true if you aren't able to use form tags (ASP.net WebForms). |
4041
| loading | false | Set to true to display a loading animated gif next to the submit button. |
4142
| loadingContainer | 'bh-sl-loading' | Class of element container that displays the loading animated gif. |

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-storelocator-plugin",
3-
"version": "2.2.2",
3+
"version": "2.3.0",
44
"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.",
55
"repository": {
66
"type": "git",

‎readme.md

+7
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ for even faster loading.
2727

2828
## Changelog
2929

30+
### Version 2.3.0
31+
32+
* Added fullMapStartBlank option to show a blank map without any locations initially. Set this setting to an integer,
33+
which will be applied as the initial Google Maps zoom value and will then fall back to the mapSettings zoom level after
34+
a serach is performed.
35+
* Added fullMapStartBlank example file.
36+
3037
### Version 2.2.2
3138

3239
* Added preventative styling to avoid table conflicts with directions panel.

0 commit comments

Comments
 (0)