jQuery Store Locator version 2.0.0 released
I’m happy to announce that a major new update to my jQuery Store Locator plugin has been released and is now available on GitHub. Version 2 is a complete rewrite 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
For documentation I’ve updated my original post so please refer to that post for instructions and comment there if you have questions. My next step will be to create a premium WordPress plugin that will make use of this jQuery plugin. No ETA at this time but I have already started working on it and have a very early working version.
Oops! We could not locate your form.
Hey Bjorn, I love the plugin. It is really a work of art! Thank you for sharing this with the world.
I had a question that I think you might be able to help with. Essentially, I want the Google map to be draggable when on desktop but not draggable when viewing on a mobile device. Any advice on how this can be accomplished?
Thanks!
Thanks, Ryan. One way you could do this would be to detect the width of the window with jQuery and feed the plugin different settings depending on the size. This will work on page load and not when the browser is resized but you can add that if it’s really needed with $(window).on(‘resize’…
$(function () { var screenWidth = $(window).width(); if (screenWidth < 1024) { $('#map-container').storeLocator({ 'mapSettings': { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDoubleClickZoom: true, scrollwheel: false, navigationControl: false, draggable: false } }); } else { $('#map-container').storeLocator(); } });If you want to actually do some kind of device detection you’ll probably want to rely on something else. Maybe the CMS you are using, maybe Modernizr’s touch screen detection, maybe a third-party class or script, etc.
Thanks, Bjorn! I was trying that method but my code wasn’t responding correctly. Your code is working perfectly.
I made use of this plugin on this page: http://www.ngpg.org/practice-map/
It’s responsive with percentage paddings on the map and list to allow for fluid responsiveness. I Love it!
Hello, You have done a brilliant job!
However, see the below, when i enable auto geo location and max distance ‘true’, it doesnt give any results. However, if you put manual location and search it works charm. I have tested with all your pure test files even, placing only maxDistance enabling. I belive this is a bug or is it something you would need to develop? Sorry about too many info.
Thanks bjorn.
Kind regards,
Daniel
$(function() {
$(‘#map-container’).storeLocator({
‘autoGeocode’: true,
‘maxDistance’: true,
‘taxonomyFilters’:{
‘category’ : ‘category-filters-container1’
}
});
});
Hello,
Yes, this appears to be a bug. I will release an update with a fix soon but you can do the following in the meantime:
In the locationsSetup method that starts on line 1170 change the if statement below the “Create the array” comment on line 1178 to:
if (this.settings.maxDistance === true && firstRun !== true && typeof maxDistance !== 'undefined' && maxDistance !== null) {Hello, Bjorn.
I was checking this newer version of the store locator plugin and I remembered there was an effort to do a “distance matrix” call to Google Maps API in a fork, but you decided not to go that route.
Have you considered adding this as an option? I had thought of doing the initial distance calculation and then a distancematrix calculation of the closest 10 points would lend itself to an adequate use of the Google Maps API limitations.
Hello,
I had tried testing with it but ran into the limitations very quickly and it didn’t seem like it was worth it. 100 elements per 10 seconds and 2500 elements in 24hrs seems way too low for anything useful.
Hello Bjorn,
Appreciate lots your response to my query. And i am happy that the resolution. However, I did bit modified your solution and got it work. Thought it might be useful to you as well.
When you comment line 1178 in my one, or 1170 originally in your js file, method call at this one “data.distance = this.geoCodeCalcCalcDistance…….” you cannot use postcode or address finder with maxDistance. It will give null results to the user at front end.
However, instead of doing that what i did was without commenting line 1170, i did comment the “create array” if statement first comparison line and used your one posted above.
It s working charmly no major issue. But, you cannot use name search feature. Thats not a problem i think, at this stage anybody can use address field to use this fantastic tool.
Thank you very much Bjorn.
all the best.
Kind regards,
Kannangara
I’m not able to replicate that issue. If I enable autoGeocode, maxDistance and nameSearch I’m still able to use the nameSearch after the initial results load. nameSearch only searches the “name” attribute in your data. Make sure you’ve set the nameAttribute setting if you’re not using the “name” attribute in your data.
Thank you very much. Indeed you have done great job.
Hi Bjorn
Is it possible to limit the search results to a specific country, for example if someone searches ‘Birmingham’ (and they are in the UK) it will show UK results and not Birmingham USA?
If all of your locations are in one country you should use the region parameter described in step 4 of the main locator post. If you have multiple countries the best thing to do is to add a region select field to the form and use the regionID plugin setting.
Hi Bjorn,
Quick question I hope. I had a previous version of the Store Locator and when I enter a location it zooms in on that location and you must scroll around to find the stores. Currently my stores are so spread out that i’m zoomed out completely and the world map shows. When I adjust min and max zoom levels, it zooms into China and not the USA because the map repeats when showing the world. Any advice or help? Thanks!
It depends on the version but try setting the zoom to 0 (zero) to center and zoom automatically. That will show all markers on the map.
Hi Bjorn
I’m having trouble getting custom xml attributes to work. I can modify the templates just fine, but custom attr’s are ignored.
Maybe I’m missing something, I don´t know. Any ideas?
Thanks! 🙂
Just to clarify; I used you xml example to get things going, and just added an attr named “owner” with some random text in it. It’s completely ignored. All other xml changes are accepted.
Is there anybody out here that still helps with this plugin?
When I select some of my categories and then deselect them the map goes blank. Does anyone know what may cause this?
http://gacapus.com/r/directory/capus-resource-directory.html
Thanks,
Bobby
Hi! Thanks for your great plugin! Can you add function that willbe run if autogeocode don’t work and set current location by IP, by example using this plugin https://www.sitepoint.com/geo-location-2-lines-javascript/.
No, I don’t want to rely on other third-party plugins.
Hi Bjorn,
I love your Store Locator.
If I wanted to change the pin style on the map (replace with my own .png file), how would I go about that?
Russ
Please see the markerImg setting.
Hi ,
Map isn’t loading here is my xml file https://s3.amazonaws.com/static.organiclead.com/Site-a3405137-693a-4eb2-bfff-6bbc04d007d8/assets/locations24.xml can you help me solve this issue ?.
Thanks
The Google Maps API server rejected your request. Invalid request. Invalid ‘q’ parameter.
Hi there, I’m actually looking for a way to do an autocomplete search with a radius.
But at the same time have some markers ALWAYS staying visible no matter if they fall within or without the radius.
So is there some way I can let the script filter the locations, except for some very important ones….