Code Monkey home page Code Monkey logo

jquery-store-locator-plugin's Introduction

The files you're looking for are in the dist/ directory

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. How you create the data file is up to you. I originally created this for a company that didn’t have many locations, so I just used a static XML file. You will need to geocode your locations beforehand or use a geocoding API service if you want to try to do it on the fly. The reason for this is that all free geocoding APIs have strict limits that would easily be exceeded. In the end, you're much better off storing the coordinates versus having to look them up for each location on each request.

A note on the distance calculation: this plugin currently uses a distance function that I found on the blog of Chris Pietschmann. Google Maps API version 3 does include a distance calculation service (Google Distance Matrix API) but I decided not to use it because of the current request limits, which seem somewhat low. For v2 I also tried experimenting with the Directions API to request distances but also found the limits to be too restrictive. So, the distance calculation is “as the crow flies” instead of a road distance calculation. However, if you use the inline directions option that does provide the distance that's returned via the directions request.

Last, it’s very important to note that the plugin requires the Handlebars template engine. This separates the markup of the infowindows and location list elements so that they can easily be restructured. Handlebars pretty slick, will read Mustache templates, and the built-in helpers really come in handy. Depending on what your data source is, 2 of the 4 total templates will be used (KML vs XML or JSON) and there are options to set the paths of each template if you don’t want them in the default location. If you’re developing something for mobile devices the templates can be pre-compiled for even faster loading.

WordPress version

Cardinal Locator - WordPress store locator plugin is now available, which uses this jQuery plugin as a base and all of the settings can be set via a settings page in the WP dashboard. It also integrates with core WordPress features such as custom post types for location data and custom taxonomies for location categorization and filtering.

Changelog

Version 3.3.0

  • Updated max distance functionality to make distance changes apply dynamically vs. having to manually click button.

Version 3.2.1

  • Swapped old maps.google.com API domain to maps.googleapis.com in all example files.

Version 3.2.0

  • Added new Google Maps lazy load setting and example file - see new lazyLoadMap and apiKey settings.

Version 3.1.14

  • Added label tags to radio button markup in categories example file.
  • Fix - reverted removal of zoom reset to 0 after taxonomy filtering due to introduction of new issue.
  • Fixed comment typos.

Version 3.1.13

  • Fixed additional disable filtering functionality related to select options and radio buttons by globally tracking the disabled values.
  • Removed zoom reset to zero on taxonomy filtering to keep searched location in view.
  • Updated maybeDisableFilterOptions to run when full map start or default location settings are enabled.

Version 3.1.12

  • Added automatic reset functionality that fires when address input field value is removed (changed to blank).
  • Fixed additional issues with new disable filtering functionality with select fields, radio buttons, and updated address input value.
  • Fixed markerClusterer library usage of deprecated Google Maps addDomListener. Props @marcohanke via #294
  • Updated jQuery version in example files.
  • Updated query string functionality to fill in address and name search with query string values in search form.

Version 3.1.11

  • Fixed issue with new disable filtering functionality with radio buttons.
  • Fixed issue with reset button where all locations were duplicated - introduced in v3.0.1. Reported in #293.
  • Updated functionality to reset disabled form filters when Reset button is clicked.

Version 3.1.10

  • Added map marker accessibility.
  • Deprecated bounceMarker setting due to Google Charts API deprecation and poor animation results with Google marker labels.
  • Fixed issue with new disable filtering functionality when location objet property is missing.
  • Fixed marker labels not working with previous technique. Swapped to google.maps.Marker label parameter.
  • Updated package devDependencies.

Version 3.1.9

  • Added functionality to disable input and option fields that don't have matching values in the current location set after filtering when inclusive filtering is used (default).
  • Extended nameAttribute settings so multiple attributes can be searched. Separate attribute names with commas.
  • Fixed location set length scenario when fullMapStart is enabled and taxFilters is reset and name search and origin are empty.
  • Show empty result message if no locations with default sorting.
  • Temporary fix for missing Google Maps callback parameter console error - the parameter requirement was not previously enforced on the API side.
  • Updated deprecated google.maps.event.addDomListener usage with window.addEventListener.

Version 3.1.8

  • Added coordinate range check to exclude locations with invalid latitude and longitude values.

Version 3.1.7

  • Fixed empty name search value not clearing previous value.
  • Fixed openNearest setting not working in combination with querystringParams setting.
  • Fixed openNearest setting not opening correct location with custom sorting (sortBy) enabled.

Version 3.1.6

  • Added extra check to make sure mapping doesn't fire twice when defaultLoc is enabled and fullMapStart is also enabled. fullMapStart is not needed when defaultLoc is enabled and this is just a preventative to avoid user errors.
  • Fixed centering issue on initial search with maxDistance enabled introduced with fitBounds updates in last update.

Version 3.1.5

  • Added Google Maps object as a parameter for callbackMarkerClick callback.
  • Added a zoom listener after fitBounds is used to prevent high zoom levels after name search and taxonomy filtering.
  • Improved zooming when maxDistance setting is enabled taking advantage of the fitBounds method.

Version 3.1.4

  • Fixed name search filter value not clearing if form input is cleared.

Version 3.1.3

  • Fixed empty name search field value overriding filter results.
  • Fixed groups of filters not applying together.
  • Fixed potential error from occurring if fullMapStartListLimit is set, and the number of locations is less than the limit.
  • Updated bundled Handlebars to v4.7.7 that addresses a critical vulnerability.
  • Updated jQuery version in example files to v3.6.0.

Version 3.1.2

  • Fixed name search issue introduced in v3.1.1. Reverted to previous matching pattern only for name searches and still using the new patter for taxonomy matching.

Version 3.1.1

  • Enhanced filtering regular expression to better account for exact matches vs. substrings.
  • Fixed multi-category selection filtering issue introduced in last version 3.1.0.
  • Updated bundled Handlebars to v4.7.6.
  • Updated node modules.

Version 3.1.0

  • Added featuredDistance setting to restrict featured locations by a specified distance (number value should be used).
  • Updated bundled version of Handlebars to v4.5.1 due to security issue.
  • Updated taxonomy filtering REGEX and string replacements for international character support.

Version 3.0.1

  • Added custom order handling to tie into previously added custom sorting. Set order to asc or desc.
  • Added functionality to fill in search input with determined address when using autoGeocode or geocodeID settings.
  • Added Google Map object as parameter to callbackBeforeSend, callbackListClick, callbackModalReady, and callbackFilters callbacks.
  • Changed parseJSON to native JSON.parse due to deprecation in rawData processing function.
  • Fixed issue with mapReload (triggered with optional reset button) where storeLimit wasn't reset.
  • Updated sort-example.html example with order select field.

Version 3.0.0

Version 3 has a breaking change with the dataLocation and dataType settings switching the default from XML to JSON.

  • Added ajaxData to allow custom data to be sent with the AJAX request. The setting accepts an object.
  • Added altDistanceNoResult setting to display no results message vs. all locations when closest location is further than distanceAlert setting.
  • Added callbackAutoGeoSuccess callback that fires after the geolocation API returns a successful result.
  • Added callbackFormVals callback that fires after the form values have been processed from the form.
  • Added callbackGeocodeRestrictions callback that allows the componentRestrictions object to be overridden.
  • Added callbackNearestLoc callback that fires when the nearest location is triggered with the openNearest setting.
  • Added callbackSorting callback that fires when when a new sorting method is selected.
  • Added component filtering for geocoding to better restrict by area.
  • Added length unit (distance miles/kilometers) front-end swap functionality, setting and example file.
  • Added mappingObject, originPoint, data, and page parameters to callbackSuccess callback.
  • Added new front-end sorting functionality, settings, and example file.
  • Added location data object as parameter of callbackDirectionsRequest callback.
  • Added openNearest setting to open/select the nearest location after searching.
  • Fixed issue with featuredLocations setting where featured locations at far distances would trigger distance alert.
  • Fixed issue with filtering values containing ampersands, which would not display any results - updated filtering regex.
  • Fixed issue where HTML5 Geolocation was skipped when using the fullMapStartBlank setting.
  • Fixed issue with pagination page numbers displaying after no results via PR from heldr88
  • Fixed issue with taxonomy filtering and autoGeocode setting where HTML Geocoding API would run on every filter change.
  • Removed Less from the project as it is no longer needed with the Bootstrap update.
  • Swapped the default location data type to be JSON instead of XML.
  • Updated Bootstrap example file to make use of Bootstrap 4.
  • Updated taxonomy filtering so pagination is reset to first page after selecting a filter.

Version 2.7.4

  • Fixed error when filtering with query strings where filter values with spaces wouldn't work.
  • Updated processForm method so submitting the map removes focus from any of the form input/select fields instead of just the address input.
  • Updated filterData string replace methods to match string replace method in filters setup.

Version 2.7.3

  • Added ability to indicate multiple query string parameter values (for checkboxes) with a comma separated list value.
  • Added autoCompleteDisableListener setting to disable the listener that immediately triggers a search when an auto complete location option is selected.
  • Added blur to primary location input field after form submission to hide mobile keyboards.
  • Added check to exclusive filtering to make sure filter values are not undefined before proceeding with the regular expression.
  • Added functionality to automatically select/check filters on load from query string parameter values.
  • Added location details object to callbackListClick and callbackMarkerClick objects.
  • Fixed broken dragSearch functionality that was introduced after map scope pull request was merged.
  • Fixed Handlebars targeting issue triggered by placing an unordered list within the location list template.
  • Fixed issue with fullMapStart where conditional was checking if isNaN was true when it should have been false on fullMapStartListLimit setting.
  • Updated callbackListClick documentation to include second market object parameter.
  • Updated zooming to prevent fitBounds from being used when query string parameters are in use and the location has been set with bh-sl-address.

Version 2.7.2

  • Added callbackRegion callback, which allows region to be set before being sent to the Google Maps Geocoding API.
  • Fixed incorrect origin marker parameter order after code restructure.
  • Fixed issue where searching by name after searching by address, without a new address, didn't reset the origin.
  • Merged pull-request from ollea that adds "getMap" function that returns a google.maps.Map instance.

Version 2.7.1

  • Hotfix to prevent potential error with updated filterData method if the category of a location is undefined.

Version 2.7.0

  • Added callback documentation.
  • Added callbackCreateMarker for custom marker overrides.
  • Added InfoBubble support and example file.
  • Added location results total count if HTML element with "bh-sl-total-results" class exists.
  • Added checks to replace non-ASCII characters when filtering.
  • Added reset functionality that can be triggered via a button that has the CSS class "bh-sl-reset".
  • Added query string parameter filter check so that results can be filtered with URL query strings.
  • Fixed issue with maxDistance and querystringParams settings combination.
  • Moved some functionality from processData into new separate methods.
  • Removed non-standard $1 RegExp property in processData method.

Version 2.6.2

  • Added callbackMapSet callback that fires after the map has been set up.
  • Fixed issue where locations without attributes set could get the attribute values from prior locations.
  • Fixed issue where pagination total number of pages was based on the full location set total instead of the storeLimit setting.
  • Removed form markup from initial query string example index file as it's not needed until the submission page.

Version 2.6.1

  • Added additional error handling when the plugin checks the closest location.
  • Added listener for autoComplete change so that the search processes when a new place is selected.
  • Fixed issue with new boundary search AJAX params after a full address search was made.
  • Merged in pull request from noclat that added autoCompleteOptions setting.

Version 2.6.0

  • Added bounds and formatted address info from geocoding API to AJAX data parameters.
  • Added Marker Clusterer library support, setting and example file.
  • Added disableAlphaMarkers setting to completely disable displaying markers and location list indicators with alpha characters.
  • Fixed issue with combination of autoGeocode and originMarker settings.
  • Merged in pull request from drcomix that fixed zoom issue with dragSearch setting.
  • Switched included remote scripts in example files to https.
  • Updated jQuery references to the latest version.

Version 2.5.3

  • Removed check from createMarker method that removed spaces from categories - created issues with categories that have spaces.
  • Re-worked handling of no results.
  • Updated createMarker method to ensure custom category marker images are converted to integers if strings are passed for dimensions.
  • Updated autoGeocode and default location functionality so that max distance is applied on initial load.

Version 2.5.2

  • Fixed pagination bubbling issue.
  • Fixed pagination issues with autoGeocode and dragSearch combinations.

Version 2.5.1

  • Fixed issues with visibleMarkersList and location list background colors and selection.

Version 2.5.0

  • Added new dragSearch setting which performs a new search when the map is dragged when enabled.
  • Added new geocodeID setting so that the HTML geocoding API can be triggered by a button instead of firing automatically.
  • Fixed issues with no results where clicking the marker would display data from the previous result and clicking the location list item would throw an error.
  • Merged in pull request from hawkmeister with update to bower.json file with main property.
  • Merged in pull request from hyperTwitch with fixes for using fullMapStartListLimit in combination with a different store limit.
  • Updated jQuery references to the latest version.

Version 2.4.2

  • Fixed issue with new full map start location list limit where clicking on a marker that didn't have a list item displayed caused an error.
  • Fixed issue with settings combination of inline directions and default location.
  • Reverted change to new list limit so that it's always applied with full map start enabled.

Version 2.4.1

  • Changed new full map start list limit so that it's only applied on the initial load.
  • Fixed issue with new autocomplete setting where search was firing twice.

Version 2.4.0

  • Added new selected marker image options to highlight clicked marker.
  • Added Google Places autocomplete option and example file.
  • Added full map start location list limit setting.

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 results message and empty map.

Version 2.3.2

  • Tweaked list label width styling.

Version 2.3.1

  • Added preventative styling to inline directions panel table.
  • Switched to unitless line-heights.

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 search is performed.
  • Added fullMapStartBlank example file.
  • Fixed filters select field styling inconsistency.
  • Moved pagination container within map container div in pagination example to avoid confusion when combined with modal option.
  • Reworked styling so that all HTML example files are responsive by default.
  • Updated map-container ID in all example files with bh-sl prefix.

Version 2.2.2

  • Added preventative styling to avoid table conflicts with directions panel.
  • Fixed clearMarkers issue with inline directions enabled.

Version 2.2.1

  • Updated preventative styling to be more specific to the map container and added max-height img rule.

Version 2.2.0

  • Added check for Google Maps API.
  • Added Grunt Handlebars task for compiling Handlebars templates from src directory - will add more compatibility in future release.
  • Added preventative styling to avoid conflicts with CSS frameworks and resets.
  • Default design refresh.
  • Fixed bug with inline directions panel that occurred after multiple address submissions.
  • Removed sensor parameter from Google Maps API URL as it's no longer needed.
  • Switched the default plugin styling from LESS to SASS.
  • Updated included Handlebars to v4.0.5.

Version 2.1.0

Includes contributions from from Giancarlo Gomez.

  • Added ability to pass in array object as dataRaw.
  • Added writeDebug console.log helper function for debugging.
  • Added sessionStorage option to store user's location when autoGeocode in enabled to prevent multiple lookups per session.
  • Fixed bug with inline directions panel that occurred after multiple address submissions.
  • Updated processForm method form field variables with empty string fallback values.

Version 2.0.9

  • Fixed issue when using catMarkers setting and not setting a location's category resulted in an error.

Version 2.0.8

  • Changed infowindow and location list templates so that the comma is added if the city is available.
  • Fixed issue with inline directions where "null" was prepended to the destination address.
  • Fixed close directions bug where close icon couldn't be clicked more than two times.
  • Fixed bug where form wasn't overriding query string parameters.
  • Updated processForm method to accept max distance query string parameter.
  • Updated processForm method to use existing origin data if it's present and matches to avoid unnecessary geocode requests.
  • Updated max distance check to less than or equal to the selected distance vs. just less than.
  • Updated regionID description in options.md for clarity.
  • Updated formEventHandler method to prevent ASP.net form submission on keydown instead of keyup.
  • Updated mapSettings description in options.md to highlight that zoom can be set to 0 for automatic centering and zooming.

Version 2.0.7

  • Fixed bug where reverse geocoding wasn't passing the origin to the templates (autogeocode and default location), causing incorrect direction links.
  • Updated location list directions link to use https.

Version 2.0.6

  • Added the option to filter data exclusively rather than inclusively with the exclusiveFiltering setting.
  • Added callbackFilters that fires when a filter is changed and returns the filter values if needed.
  • Added dataRaw option to use raw KML, XML or JSON data instead of the AJAX call.
  • Added basic raw data example rawdata-example.php file.
  • Added visibleMarkersList option that updates the location list to only display data from the markers that are curently displayed on the map.
  • Changed the distance error functionality so that the map centers and zooms automatically and all locations are displayed on the map.
  • Fixed issue with fullMapStart and inlineDirections setting combination.
  • Fixed issue with global olat and olng variables not being set with autoGeocode setting enabled.
  • Fixed issue with maxDistance and autoGeocode setting combination.

Version 2.0.5

  • Fixed typo with originMarker setup.
  • Made the originMarkerDim setting optional when setting a custom origin marker image - defaults to 32px by 32px.
  • Removed geocodeErrorAlert language option and switched error alerts to custom exceptions so users aren't shown multiple alerts.
  • Fixed bug with inline directions where close icon wasn't being removed on page reload.
  • Added callbackListClick that fires when a list element is clicked.
  • Added callbackMarkerClick that fires when a map marker is clicked.

Version 2.0.4

  • Fixed bug with maxDistance and pagination setting combination. The last page of of the pagination results was set to use the locationsPerPage setting instead of the remaining number, which could have resulted in the plugin trying to load undefined locations.
  • Fixed bugs with googleGeocode and reverseGoogleGeocode methods in which references to "this" were undefined.

Version 2.0.3

  • Fixed bug with maxDistance setting - updated locationsSetup method so that the locationset array uses array.push instead of incrementing via a passed in parameter, which was causing undefined array elements and causing errors.
  • Removed testing line from maxdistance-example.html that was left in.

Version 2.0.2

  • Updated the Handlebars.compile calls when using the inline template options to include the ID hash so that it's consistent with the other ID settings.
  • Fixed incorrect callback call in the modalClose method - callbackModalOpen to callbackModalClose.
  • Added callbackModalReady that fires when the the content of the modal is generated.
  • Fixed markerImg setting - previously threw error if markerDim wasn't set.

Version 2.0.1

  • Quick fix to remove a dupicate copyright notice in dist/ file. Copyright was removed from src/jquery.storelocator.js file to prevent duplication with the Grunt Banner task.

Version 2.0.0

Version 2 is a complete rewrite of the plugin based on the "basic" plugin pattern of the jQuery Boilerplate. The overall file structure has changed, several of the plugin settings have changed and all of the CSS is now prefixed to avoid potential collisions. In other words, you're not going to be able to simply replace the main plugin file to upgrade to the latest version. I've been working on this update off and on for the past six months, so a lot has changed. I've also added many new features based on the most common requests I've received. The following list doesn't cover everything that's new but all of the important items to note:

  • Grunt is now utilized to minify and compile the plugin and CSS. You only need to worry about running this if you're doing extensive modifications or are interested in submitting a pull request.
  • Plugin file structure and programming pattern have been reworked to follow the basic jQuery Boilerplate pattern
  • Many of the methods are public and can be called as needed
  • Google Maps settings are now exposed as a setting. Instead of trying to modify the plugin to make Google Maps settings changes simply use the mapSettings option to override.
  • Added inline directions option
  • Added multi-group live filtering via regex for quick category, etc. filtering.
  • Added option to search locations by name
  • Added option to set custom markers by category
  • Added option for paginating results
  • Added responsive Bootstrap example
  • Added region biasing setting to handle region/country select field
  • Added coordinates and address (user input) to primary AJAX GET request for better back-end integration
  • Added option to check for query string parameters

Version 1.4.9

More contributions from Mathieu Boillat and Jimmy Rittenborg in addition to a few style updates:

Version 1.4.8

This update is made up of contributions from Mathieu Boillat and Jimmy Rittenborg:

  • Added the possibility to set the 'storeLimit' option to -1, which means unlimited
  • Added the possibility to set the 'distanceAlert' option to -1, which means disable distance alert
  • Added little checks to only format 'web' variable when it is not null otherwise javascript would gives an error
  • Possibility to add custom variables in locations
  • If 'distance' variable is set in location, do not calculate it
  • Simplified some parts of the code
  • If noForm is true, only simulate the submit when the field is actually in focus

Version 1.4.7

Added ability to feature locations so that they always show at the top of the location list. To use, set the featuredLocations option to true and add featured="true" to featured locations in your XML or JSON locations data.

Version 1.4.6

Fixed a bug where infowindows wouldn't open if the map div was changed.

Version 1.4.5

A minor update that includes the latest versions of jQuery and Handlebars, two new location variables and some clean-up.

  • Added email and country variables for locations
  • Updated included Handlebars version to v1.0.0
  • Updated jQuery call to v1.10.1
  • Some bracket clean-up

Version 1.4.4

This update includes a bug fix for form re-submissions that was most apparent with the maximum distance example. It also includes a new jsonpCallback setting that was submitted by quayzar.

  • Moved markers array declaration up to line 115
  • Added a reset function that resets both the locationset and markers array and resets the list click event handler
  • Includes quayzar's jsonpCallback callback

Version 1.4.3

A minor update with some clean up and additional language options.

Additions:

  • Added several options for messaging so they can be easily translated into other languages
  • Added event namespacing
  • Added category to location variables

Fixes:

  • The distance error would only display "miles" in the alert. It will now show miles or kilometers depending on what the lengthUnit option is set to.

Version 1.4.2

This is another minor patch with a few important fixes and one addition. The plugin has also been submitted to the official jQuery plugin registry, which is finally back online.

Additions:

  • Added a "loading" option, which displays a loading gif next to the search button if set to true
  • Added missing modal window callback functions

Fixes:

  • The locationset array wasn't being reset on re-submission, which was a more obvious problem when trying to use the maxDistance option. Accidentally removed in 1.4.1.
  • When using the fullMapStart option the map wouldn't center and zoom on closest points after form submission
  • Using the fullMapStart and maxDistance options together would cause errors
  • Wrapped template loading and the rest of the script in separate functions to ensure that the template files are loaded before the rest of the script runs
  • Changed all modal window DIVs to use options for full customization. I thought about having a third template for the modal but it seems like overkill.
  • Updated the jQuery version in all the example files to 1.9.1 and switched the source to use the Media Temple CDN version because Google is taking too long to update their version.

Note that if you try to use the minified version of jQuery 1.9.0 the plugin will error out in Internet Explorer due to the bug described in ticket 13315.

Version 1.4.1

This is a minor patch to switch array declarations to a faster method, fix line 682 to target with the loc-list setting instead of the div ID, and remove a duplicate locationset declaration on line 328.

Version 1.4

This is a large update that has many updates and improvements. It’s very important to note that the plugin now requires the Handlebars template engine. I made this change so that the data that’s displayed in the location list and the infowindows can be easily customized. I also wanted to separate the bulk of the layout additions from the main plugin file. Handlebars pretty slick, will read Mustache templates, and the built-in helpers can really come in handy. Depending on what your data source is, 2 of the 4 total templates will be used (KML vs XML or JSON) and there are options to set the paths of each template if you don’t want them in the default location. If you’re developing something for mobile devices the templates can be pre-compiled for even faster loading. Additionally, I’d also like to note that it probably makes more sense to use KML now as the data source over the other options but I’m definitely leaving XML and JSON support in. XML is still the default datatype but I may switch it to KML in the future.

New features:

Kilometers option
This was a no-brainer. You could make the change without too much trouble before but I thought I’d make it easier for the rest of the world.

Origin marker option
If you’d like to show the origin point, the originMarker option should be set to true. The default color is blue but you can also change that with the originpinColor option. I’m actually not positive how many colors Google has available but I know red, green and blue work - I would just try the color you want to see if it works.

KML support
Another obvious add-on. If you’d like to use this plugin with more customized data this would be the method I’d recommend because the templates are simplified to just name and description. So, you could put anything in the descriptions and not have to worry about line by line formatting. This method also allows you to create a map with Google “My Maps” and export the KML for use with this plugin.

Better JSONP support and 5 callbacks
Thanks to “Blackout” for passing these additions on. It should make working with JSONP easier and the callbacks should be helpful for anyone wanting to hook in add some more advanced customization.

ASP.net WebForms support
If you’re woking with ASP.net WebForms, including form tags is obviously going to cause some problems. If you’re in this situation simply set the new noForm option to true and make sure the formContainerDiv setting matches your template.

Maximum distance option
You can now easily add a distance dropdown with any options that you’d like. I’ve specifically added a new HTML file as an example.

Location limit now supports any number
This plugin was previously limited to only display a maximum of 26 locations at one time (based on the English alphabet). You can now set the limit to whatever you’d like and if there are more than 26 it will switch to just show dot markers with numbers in the location list.

Open with a full map of all locations
I had several requests asking how to accomplish this so I’ve added it as an option. There’s a new fullMapStart option that if set to true, will immediately display a map with all locations and the zoom will automatically fit all the markers and center.

Reciprocal focus
“JO” was particularly interested in adding this to the plugin and I finally got around to it. To accomplish reciprocal focus I add an ID to each marker and then add that same ID to each list element in the location list taking advantage of HTML5’s new data- attributes. I also added some jQuery to make the location list scroll to the correct position when its marker is clicked on the map.

Notes:

A few option names have changed, so be sure to take note of the changes before updating your files - especially people using JSON data.

I've included a basic LESS stylesheet without variables that can be used in place of the main map.css stylesheet. If you want to use it make any changes you want and compile it or include it in your main LESS file.

I’m somewhat concerned about the markers for future versions. Google has deprecated the Image Charts API, which is annoying (they always seem to deprecate the best things), but these should still continue to work for a long time. With that said though, my opinion of the look of Google’s markers is that they’re quite ugly. I was working on adding a new custom markers that could be controlled with CSS via the Rich Marker utility but I was unable to get that to work with the marker animations. I was also looking into using Nicolas Mollet’s custom marker icons, which look very nice compared to Google’s, but that project is apparently under maintenance until further notice. If you have suggestions on this concern I’d be interested in hearing them.

Version 1.3.3

Forgot to remove one of the UTF-8 encoding lines in the Geocoder function.

Version 1.3.2

Only a few special characters were working with the previous fix. Removed special encoding and all seem to be working now.

Version 1.3.1

Replaced .serialize with .val on line 169 and added the line directly below, which encodes the string in UTF-8. This should solve special character issues with international addresses.

Version 1.3

Added directions links to left column location list and HTML5 geolocation API option. Also did a little cleanup.

Version 1.2

Added JSON compatibility, distance to location list, and an option for a default location. Also updated jQuery calls to the latest version (1.7.2) and removed an unnecessary line in the process form input function.

Version 1.1.3

Serlialize was targeting any form on the page instead of the specific formID. Thanks to Scott for pointing it out.

Version 1.1.2

Changed it so that the processing stops if the user input is blank.

Version 1.1.1

Added a modal window option. Set slideMap to false and modalWindow to true to use it. Also started using the new jQuery .on() event api - make sure you're using jQuery v1.7+ or this won't work.

Version 1.0.1

Left a couple of console.logs in my code, which was causing IE to hang.

Version 1.0

This is my first jQuery plugin and the first time I’ve published anything on Github. Let me know if I can improve something or if I’m making some kind of mistake.

jquery-store-locator-plugin's People

Contributors

bjorn2404 avatar bryant1410 avatar collinanderson avatar drcomix avatar giancarlogomez avatar heldr88 avatar hypertwitch avatar jimmyrittenborg avatar k1mmm avatar marcohanke avatar noclat avatar ollea avatar quayzar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-store-locator-plugin's Issues

maxDistance Doesn't show results

I have a fully working slocator on my page showing all results. When I enter a zip code, it shows up to 1,700 radius. I am trying to limit the amount of miles on the index file by adding the 'maxDistance':true to 100 but nothing shows up after that. Same thing if I enable the little dropdown,

Can you please help?

Here is the code:

<script> /* $(function() { $('#map-container').storeLocator({ 'slideMap' : false, 'defaultLoc': false, 'fullMapStart': false, 'maxDistance': true, //'maxDistanceID':'100', 'distanceAlert': -1 //'defaultLat': '26.230187', //'defaultLng' : '-80.1401912' //autoGeocode: true }); }); */ $(function() { $('#map-container').storeLocator({'maxDistance': true}); }); </script>

Thank you much!

Wrong Call of callbackModalOpen

Hi there!

In lines 564/565 you refer in method modalClose twice to
this.settings.callbackModalOpen instead of this.settings.callbackModalClose.

please fix this!

Greetings,
lietzi

Multiple locator in 1 page

Hi Bjorn,

Thank you for the awesome plugin!
It works great on my site but I was wondering is it possible to put 2 different store locator in 1 page? i tried to duplicate the file but it screwed up instead ^^"

Please advice how to solve this issue.
Many thanks in advance!

Map not being displayed when having mapSettings

$(function() {
    $('#map-container').storeLocator({
        'mapSettings' : {
        },
    });
});

Added this to the index.html example.

Load page, type in "434", and the map is being loaded. Now type in "Minnetonka" and the map doesn't load.

originMarkerImg bug

Hi Bjorn,

I have submitted some other issues in my previous post which is closed, are you still receiving notifications??

Custom Marker

Hi,
I'm trying to change the marker, i'm using "markerImg": "/path/img/img.png" but nothing seems to change! any idea shat that may be??

Thanks

featured locations always displayed, possible ?

Hi,

I am wondering how could I always display the featured location ? I know this is not implemented in the plugin.

the featured locations would always be displayed on the list and always displayed on the map no matter which filters and/or location searches are.

If you can point me to the right direction on your functions, I can try to do it, basically I think it would be to filter everything except the featured ones.

CatMarkers and blank grey map if NoResults

Hi,

Anyone getting the same issue on the catMarkers ?

When I use catMarkers with the following code

        'catMarkers' : {
                    'Régional' : [''picto_map_regional.svg', 64, 64],
                    'National' : [''picto_map_national.svg', 64, 64],
                    'Local' : [''picto_map_local.svg', 64, 64],
                        },

They do display correctly but when I have a no results answer, I get the grey blank map.
If I do not use catMarkers ( I comment them ), the normal behavior for NoResults works.

Any clue plz ?

Zoom to nearest marker when triggering distance error

Currently, if you search for a location that's greater than the distance specified in your distanceAlert value, it shows the error alert, then centers the map on the location you specified. It would be great to have the option to have the map still center on that location, but zoom out far enough to show the closest location(s).

Example: right now, there are no locations near Montreal in my setup, so I get this:
http://screencast.com/t/Y6feLhFHcIPB
Would be nice to be able to do something like this:
http://screencast.com/t/ymUhpoj4

I understand you might not have time, but thought I'd mention this as a feature idea.

Thanks! Great plugin!

Add callbackModalReady

Hi there!

because the callbackModalOpen fires directly when the modal is generated,
there is no possibility to refer to DOM-Objects in the list or the map of the modal.

Would be nice if you could add a callback around line 1823 named like "callbackModalReady"
that fires, when all Content of the modal is generated.

I added this in line 1823 ff.:

    if (_this.settings.callbackModalReady) {
      _this.settings.callbackModalReady.call(this);
    }

thx!

Cheers.
lietzi

PHP

Hey Bjorn,

I'm getting this error message when I use your php to fetch the data from the database:

Connected to MySQL

Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in /home/topspots/public_html/smilemagic/locations.php on line 17
[]


Here is the code I'm using:

"; $results = mysql_query('SELECT \* FROM locations'); $rows = array(); while($r = mysql_fetch_assoc($results)) { $rows[] = $r; } echo json_encode($rows); ?>

Please help,

Thanks!

Markers not display with JSON and when clicked getting undefined error

I'm using JSON for my data. The data comes up in the list no problem. However, there are no markers on the page. When I click on an item in the list, I get the following error:

Uncaught TypeError: Cannot read property 'getPosition' of undefined

And this is in reference to line 721 which is: map.panTo(selectedMarker.getPosition());

My setup is:

$('#map-container').storeLocator({
        'infowindowTemplatePath': '/static/html/infowindow-description.html',
        'listTemplatePath': '/static/html/location-list-description.html',
        'dataType': 'json',
        'querystringParams' : true,
        //'dataLocation': '/static/json/locations.json'
        'dataLocation': '/api/locations?postal=97401&format=json'
      });

Any help is much appreciated

Stores Count

Hi Bjorn,
Is there a way to get the count of the found location after search?
Thank you for sharing this.

How can implement this plugin with MVC3 and SQL -Server Database.

I want to use this plugin in MVC3 ? So how can i use it with mvc3 in c# with SQL-Server Database.
How can i play with my controller and view file in mvc3 with SQL database.?
I have stored Address and latitude and Longitude value in SQL Database. So how can i give Latitude and Longitude value to Google map api , so that i can display that location on map which i pass to google map api.
Should I have to change any Java Script for this or anything else ?.

Please Suggest me.
Thanks.

Directions on map?

When clicking for directions, would it be possible to show the directions directly on the map rather than opening a new window?

Link to online Demo

Hi,
I have downloaded the code and tried to run it local and on dropbox, none of the locations did the index.html show me anything. Could you please provide an online Demo? Thanks.

/Sten

Empty search returns empty map when defaultLoc is false and fullMapStart is true

When doing an empty search with defaultLoc:false and fullMapStart:true, the map becomes completely blank. I would expect to see what is shown by default with those two options, an entire map of all locations.

Easy way to test this is to use the default-location-example.html example, changing defaultLoc to false, and then pressing the search button without entering anything into the text box.

I found this after I had done a real search then tried to get back to the default map by clearing the search field. Tested in Firefox and Chrome.

Passing zip code to dataLocation

Is there a way to pass the zip code from the form to the dataLocation file that we specify? My data is created dynamically from another service and they need to know the zip code in order to return to correct information. Thanks!

Hide map

Hey!

How can i hide the map without destroy the result-list? If i hide the map my result list dont show...

Geolocation, not working on iOS?

I was testing my site in my browser, when I decided to check on my iOS device (version 6), Well, I got messages saying "Automatic location detection failed. Please fill in your address or zip code." and "Geocode was not successful for the following reason"

Is this normal, or am I missing something?

Thanks!

You website is gone!?

Hi Bjorn,
I was about to comment on your website regarding the Jquery store locator plugin, but suddenly I get this error page your site is gone.
Did you do this or is it an hosting error?
Please let me know so maybe I can ask you the question through email or any other way.
Tnx allot.
Lau

Marker cluster

Would be a nice enhancement to add marker clustering ability.
Had to implement a really basic approach myself but could be done far more extensive.

To apply it:

...
,'markerCluster': true
,'markerClusterStyles': [{
        url: 'cluster1.png'
        ,width: 90
        ,height: 67
        ,anchor:[11,37]
        ,textColor: '#ffffff'
    },{
        url: 'cluster2.png'
        ,width: 90
        ,height: 67
        ,anchor:[11,37]
        ,textColor: '#ffffff'
    },
...

And in the plugin itself like this:

...
if(_this.settings.markerCluster === true) {
    var markerCluster = new MarkerClusterer(map, markers, {
        'styles': _this.settings.markerClusterStyles
    });
}
...

callbackFilters documentation

I'd like to clear a filter based on an if statement in the callbackFilter function. I've got 2 taxonomyFilters being filtered by two different select dropdowns (country and state). If someone selects 'US' in the country dropdown, a second dropdown with states appears. If someone selects a country other than 'US' in the first dropdown, I'd like to clear the 'states' filter. I couldn't find any documentation on how to clear a filter. Thoughts?

Template locations relative path

I had to edit the js file to allow for templates to work. As you can see templates are in the correct directory, but the main directory is in a a subdirectory. Please change the app to use relative paths so this will not be a problem for others.

My Change:

'infowindowTemplatePath': 'js/storeLocator/templates/infowindow-description.html',
'listTemplatePath': 'js/storeLocator/templates/location-list-description.html',
'KMLinfowindowTemplatePath': 'js/storeLocator/templates/kml-infowindow-description.html',
'KMLlistTemplatePath': 'js/storeLocator/templates/kml-location-list-description.html',

fullMapStart + inlineDirections bug

When fullMapStart is enabled, inline directions don't work.

I fixed is by changing the following:

in method directionsRequest on line 1032:

Change:

if(destination) {

to:

if(destination && origin) {

Maybe there is a more elegant fix, but this works for me at the moment.

Thanks for the great plugin by the way!

Sort by country first

Hello,
I'm running the 1.x version of this tool, and it's working great, but my client wants results to be sorted first by the country of the address entered, then by nearest, so that locations within the search radius, but over a national border, are shown last rather than first.

Is this possible?

Thanks!

Origin marker not working when fullmapstart is active

I am using the following settings for the locator:

      $('#map-container').storeLocator({
          'lengthUnit' : 'km',
          'storeLimit' : 10,
          'distanceAlert' : -1,
          'zoomLevel' : 0,
          'originMarker' : true,
          'fullMapStart' : true
      });

This displays the map upon loading the page as I wanted it to, however when I now type a location to search for it will not display the origin marker. The screen does however center on the location that I typed.

If I disable the 'fullMapstart' function the locator will show the origin marker correctly when searching for locations.

Allow raw data

dataLocation is great, but what about giving the ability to use the json string?

data: '{json, string, here}'

inlineDirections: getAddressByMarker

at line 1034 of jquery.storelocator.js (getAddressByMarker function):

var formattedAddress = null;

results in a string with a null concatenated at the beginning, which makes directions fails on the destination address.

I suggest to initialize with an empy string:

var formattedAddress = '';

How add autocomplete?

Hi guys,

Very nice plugin @bjorn2404. and thanks to share w/ us ;)
I'm trying to add autocomplete, but I can not make it work.
Anyone know how to add autocomplete?

Thanks

inconsistency at listTemplateID // infowindowTemplateID

Hi!

The Handling of infowindowTemplateID and listTemplateID is inconsitesten to all other "...ID" variables.

You pass $(this.settings.infowindowTemplateID).html() to Handlebars.compile in line 307
instead of $('#' + this.settings.infowindowTemplateID).html()

The same but different in line 310 with listTemplateID.

Cheers,
lietzi

Downloaded code is not working

I have download a code of this plugin for demo. I am trying to run this code on my local computer ,but its not work , it gives ' SyntaxError: invalid label ' and ' TypeError: $(...).on is not a function ' error message when i press Submit button. I have run the index.html file. It also give error message as ' ReferenceError: $ is not defined ' and ' ReferenceError: jQuery is not defined.

And also what is map.html file that i have didn't get ?
Please suggest me how to use this plugin with asp.net mvc application ?

Error handling

There appears to be an error with your error alerts. If you go to your demo and type in an invalid zip or postal you get a console error:
Safari: TypeError: undefined is not an object (evaluating ‘_this.settings.geocodeErrorAlert’)
Chrome: Uncaught TypeError: Cannot read property ‘addressErrorAlert’ of undefined
I need to implement error handling and this is holding me back. I’m changing your plugin code for our implementation but you may want to fix it.

Inline <script> Templates

I'm trying to minimize requests and was thinking the template files are pretty small, so why not inline them using something like:

<script id="listTemplate" type="text/x-handlebars-template">...</script>
<script id="infowindowTemplate" type="text/x-handlebars-template">...</script>

And then in the Store Locator config object:

{
  listTemplateID: 'listTemplate',
  infowindowTemplateID: 'infowindowTemplate'
}

Problem with the same zip code in both sides

Hi.

If I put a zip code that is the same of the zip code on json or xml file It was supposed to appear of distance 0 mile. But I've tested and the address does not appear. What's happened?

Thanks.

queryStringParams documentation

Hi,
I'd be really interested in see some documentation for the queryStringParams feature for the plugin.

I'm trying to implement a form (prior to results page) that send the variables of search and then redirect to the results page.

I think that's what the queryStringParams option is but couldn't find any kind of documentation/example of how to use it.

Thanks in advance.

Only one search on city

Hi, I have modified the search on city to country. This problem occurs even if I run the city. The problem is that they only go to filter once, I search in germany it works, I make then a new search on France so there will not be a new search but it only shows the old results in germany. What is this?

Thanks for a great plugin beyond it :)

When using geolocation and then searching for a different location the distance shown seems to be from a random location?

I have a setup where the default location is your location. autoGeocode: true. When you search for a location in say a different state, the data loads fine but the distance from is out of whack. For instance, if I open the app and do nothing, the locations that are listed are relative from my current location. Let's say for example that I'm in Portland Oregon. Everything around me is correct.

However, when I switch and search in the state of Oregon, the same locations are now several hundred miles from where I am. But I haven't moved.

So, the autoGeocode: true is correct when the page loads. But when I do a search, the same locations are now several hundred miles away. The orig lng and lat seemed to have been replaced with an arbitrary location?

Here are my settings:

$(function() {

  $('#map-container').storeLocator({
    'infowindowTemplatePath': '/static/html/infowindow-description.html',
    'listTemplatePath': '/static/html/location-list-description.html',
    'dataType': 'json',
    'dataLocation': '/api/locations?format=json',
    'distanceAlert': -1,
    'storeLimit': 400,
    'autoGeocode': true,
    'loading': true
  });

});

IE9 and IE8 Error

Great plugin, amazing work! Found a small bug on IE9 and 8, any suggestions on how to resolve? Looks like the following causes an error on these versions of explorer: "for (var key in this.attributes) {"

Once user types in their search, error will not display map or listings in these versions of IE.

Any suggestions on how to make the plugin work with these versions? Thank you so much!!
screen shot 2015-01-21 at 3 50 35 pm

screen shot 2015-01-21 at 3 44 05 pm

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.