jQuery Google Maps Store Locator Plugin

jQuery Google Maps Store Locator Plugin – This jQuery plugin takes advantage of Google Maps API version 3 to create an easy-to-implement store locator. No backend programming is needed, just feed KML, XML, or JSON data with all site information. How the data file is created is up to you. I originally created this for a company that doesn’t have many sites so I just used a static XML file. You will need to pre-codify your locations or use the Geocode API service if you want to try to do so right away. The reason for this is that all free geocoding APIs have strict limits that can be easily crossed. Ultimately, it is better to store the coordinates than to search for each location on every request.

Note on calculating distance: This plugin currently uses the distance function I found on Chris Pietschmann’s blog. Google Maps API version 3 includes a distance calculation service (Google Distance Matrix API) but I decided not to use it due to the current request limits, which seem a bit low. For version 2, I also tried the Directions API for requesting distances but also found the limits to be very restrictive. Therefore, the distance is calculated “as a crow flies” instead of calculating road distance. However, if you are using the built-in directions option that provides the distance returned via the Directions request.

Finally, it is very important to note that the plugin requires the Handlebars form to drive. This separates encoding information windows and site menu items so that they can be easily restructured. The cool handlebars will read Mustache templates, and the built-in helpers will really come in handy. Depending on your data source, 2 of a total of 4 templates will be used (KML versus XML or JSON) and there are options to set paths for each template if you don’t want them in the default location. If you are developing something for mobile devices, templates can be pre-assembled for faster loading.

google map store locator example, google maps store locator github, jquery store locator example, google map jquery plugin

Simple Location Picker on Leaflet Map In jQuery

How to make use of it:

1. Include the jQuery library and the jQuery Store Locator plugin.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="js/jquery.storelocator.js"></script> 

2. Include the required handlebars.js and Google Map API V3.

<script src="js/handlebars.min.js"></script> 
<script src="//maps.google.com/maps/api/js?key=YOUR-API-KEY"></script> 

3. Include the plugin’s stylesheet.

<link rel="stylesheet" href="css/storelocator.css">

4. The HTML structure.

<div id="map-container">
<div id="loc-list">
<ul id="list">
<div id="map"></div>

5. Call the plugin on the map container.

$(function() {

6. Options and callbacks.

// Allows custom data to be sent with the AJAX request. 
// Set the setting to an object with your properties and values.
'ajaxData'                   : null,

// Display no results message vs. all locations when closest location is further than distanceAlert setting
'altDistanceNoResult'        : false,

// Set to true to enable Google Places autocomplete. 
// Note the slight markup differences in the example file.
'autoComplete'               : false,

// Disable the listener that immediately triggers a search when an auto complete location option is selected.
'autoCompleteDisableListener': false,

// Google Places autocomplete options object.
'autoCompleteOptions'        : {},

// Disable displaying markers and location list indicators with alpha characters.
'disableAlphaMarkers'        : false,

// Set to an array of taxonomies that should filter exclusively vs. inclusively.
'exclusiveTax'               : null,

// Set to true to highlight the nearest location automatically after searching.
'openNearest'                : false,

// Set to an object for custom sorting that accepts three properties: method ('alpha', 'date', or 'numeric'), order ('asc', or 'desc'), and prop (property in your data to sort by such as name, city, distance, etc.).
'sortBy'                     : null,

// HTML elements
'addressID'                  : 'bh-sl-address',
'closeIcon'                  : 'bh-sl-close-icon',
'formContainer'              : 'bh-sl-form-container',
'formID'                     : 'bh-sl-user-location',
'geocodeID'                  : null,
'lengthSwapID'               : 'bh-sl-length-swap',
'loadingContainer'           : 'bh-sl-loading',
'locationList'               : 'bh-sl-loc-list',
'mapID'                      : 'bh-sl-map',
'maxDistanceID'              : 'bh-sl-maxdistance',
'modalContent'               : 'bh-sl-modal-content',
'modalWindow'                : 'bh-sl-modal-window',
'overlay'                    : 'bh-sl-overlay',
'regionID'                   : 'bh-sl-region',
'searchID'                   : 'bh-sl-search',
'sortID'                     : 'bh-sl-sort',
'taxonomyFiltersContainer'   : 'bh-sl-filters-container',

// Google maps settings object.
'mapSettings'              : {
  zoom     : 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP

// Marker Clusterer settings object.
'markerCluster'              : null,

// Replacement marker image used for all locations
'markerImg'                : null,

// Replacement marker dimensions object
// ex value: { height: 20, width: 20 }
'markerDim'                : 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]}
'catMarkers'               : null,

// Selected marker image.
'selectedMarkerImg'        : null,

// Selected marker image dimensions object - ex value: { height: 20, width: 20 }
'selectedMarkerImgDim'     : null,

// The unit of length. Default is m for miles.
// Change to km for kilometers.
'lengthUnit'               : 'm',

// The number of closest locations displayed at one time. 
// Set to -1 for unlimited.
'storeLimit'               : 26,

// Displays alert if there are no locations with 60 m/km of the user's location. 
// Set to -1 to disable.
'distanceAlert'            : 60,

// The format of the data source. 
// Accepted values include kml, xml, json, and jsonp.
'dataType'                 : 'xml',

// Accepts raw KML, XML, or JSON instead of using a remote file.
'dataRaw'                  : null,

// The path to the location data.
'dataLocation'             : 'data/locations.xml',

// XML element used for locations (tag).
'xmlElement'               : 'marker',

// Background color of the odd list elements.
'listColor1'               : '#ffffff',

// Background color of the even list elements.
'listColor2'               : '#eeeeee',

// Display a marker at the origin.
'originMarker'             : false,

// Replacement origin marker image.
'originMarkerImg'          : null,

// Replacement origin marker dimensions object
// ex value: { height: 20, width: 20 }
'originMarkerDim'          : null,

// Bounces the maker when a list element is clicked.
'bounceMarker'             : true,

// First hides the map container and then uses jQuery’s slideDown method to reveal the map.
'slideMap'                 : true,

// Shows the map container within a modal window. 
// Set slideMap to false and this option to true to use.
'modal'                    : false,

// Modal selectors.
'overlay'                  : 'bh-sl-overlay',
'modalWindow'              : 'bh-sl-modal-window',
'modalContent'             : 'bh-sl-modal-content',
'closeIcon'                : 'bh-sl-close-icon',

// If true, the map will load with a default location immediately. 
// Set slideMap to false if you want to use this.
'defaultLoc'               : false,

// If using defaultLoc, set this to the default location latitude.
'defaultLat'               : null,

// If using defaultLoc, set this to the default location longitude.
'defaultLng'               : null,

// Set to true if you want to use the HTML5 geolocation API (good for mobile) to geocode the user's location.
'autoGeocode'              : false,

// Set to true if you want to give users an option to limit the distance from their location to the markers.
'maxDistance'              : false,

// ID of the select element for the maximum distance options.
'maxDistanceID'            : 'bh-sl-maxdistance',

// Set to true if you want to immediately show a map of all locations. 
// The map will center and zoom automatically.
'fullMapStart'             : false,

// Set to a zoom integer if you want to immediately show a blank map without any locations.
'fullMapStartBlank'        : false,

// Set to a number to limit the number of items displayed in the location list with full map start.
'fullMapStartListLimit'      : false,

// InfoBubble settings object. 
'infoBubble'                 : null,

// Set to true if you aren't able to use form tags (ASP.net WebForms).
'noForm'                   : false,

// Set to true to display a loading animated gif next to the submit button.
'loading'                  : false,

// Class of element container that displays the loading animated gif.
'loadingContainer'         : 'bh-sl-loading',

// restrict featured locations by a specified distance
'featuredDistance'           : null,

// Set to true to enable featuring locations at the top of the location list (no matter the distance).
// Add featured=”true” to featured locations in your XML or JSON locations data.
'featuredLocations'        : false,

// Set to true to enable displaying location results in multiple "pages."
'pagination'               : false,

// If using pagination, the number of locations to display per page.
'locationsPerPage'         : 10,

// Set to true to enable displaying directions within the app instead of an off-site link.
'inlineDirections'         : false,

// Set to true to allow searching for locations by name using separate searchID field.
'nameSearch'               : false,

// ID of the search input form field for location name searching.
'searchID'                 : 'bh-sl-search',

// If using nameSearch, the data attribute used for the location name in the data file.
'nameAttribute'            : 'name',

// Set to true to have the location list only show data from markers that are visible on the map.
'visibleMarkersList'       : false,

// Set to true to perform a new search after the map is dragged.
'dragSearch'               : false,

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

// ID of list template if using inline Handlebar templates instead of separate files.
'listTemplateID'           : null,

// ID of infowindow template if using inline Handlebar templates instead of separate files.
'infowindowTemplateID'     : null,

// Filtering object that can be used to set up live filtering
'taxonomyFilters'          : null,

// Class of the container around the filters.
'taxonomyFiltersContainer' : 'bh-sl-filters-container',

// Set to true to enable exclusive taxonomy filtering rather than the default inclusive.
'exclusiveFiltering'       : false,

// Set to true to enable query string support for passing input variables from page to page.
'querystringParams'        : false,

// Store user's location when autoGeocode in enabled to prevent multiple lookups per session.
'sessionStorage'           : false,

// Callbacks
'callbackAutoGeoSuccess'     : null,
'callbackBeforeSend'         : null,
'callbackCloseDirections'    : null,
'callbackCreateMarker'       : null,
'callbackDirectionsRequest'  : null,
'callbackFilters'            : null,
'callbackFormVals'           : null,
'callbackGeocodeRestrictions': null,
'callbackJsonp'              : null,
'callbackListClick'          : null,
'callbackMapSet'             : null,
'callbackMarkerClick'        : null,
'callbackModalClose'         : null,
'callbackModalOpen'          : null,
'callbackModalReady'         : null,
'callbackNearestLoc'         : null,
'callbackNoResults'          : null,
'callbackNotify'             : null,
'callbackPageChange'         : null,
'callbackRegion'             : null,
'callbackSorting'            : null,
'callbackSuccess'            : null,

// Language options
'addressErrorAlert'          : 'Unable to find address',
'autoGeocodeErrorAlert'      : 'Automatic location detection failed. Please fill in your address or zip code.',
'distanceErrorAlert'         : 'Unfortunately, our closest location is more than ',
'kilometerLang'              : 'kilometer',
'kilometersLang'             : 'kilometers',
'mileLang'                   : 'mile',
'milesLang'                  : 'miles',
'noResultsTitle'             : 'No results',
'noResultsDesc'              : 'No locations were found with the given criteria. Please modify your selections or input.',
'nextPage'                   : 'Next &raquo;',
'prevPage'                   : '&laquo; Prev'

Google Maps Store Locator Plugin For jQuery Github, free store locator for website, google store locator json example, store locator html template

See Demo And Download

Official Website(bjorn2404): Click Here

This superior jQuery/javascript plugin is developed by bjorn2404. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…