Using query string parameters with the jQuery Store Locator
July 5th, 2015
1 minute read
Warning: Invalid argument supplied for foreach() in /home/customer/www/bjornblog.com/public_html/wp-content/plugins/gravityforms/form_display.php on line 1726
Warning: Invalid argument supplied for foreach() in /home/customer/www/bjornblog.com/public_html/wp-content/plugins/gravityforms/form_display.php on line 473
Since version 2.0.0 of the jQuery Store Locator plugin I’ve included an option to handle query string parameters but I haven’t provided many details on how to take advantage of it. I thought I would take the time to provide an example so people aren’t stuck having to dig through the plugin code to understand how to use this option. The primary use for using query string parameters with the plugin would be to set up a search and display the results on a different page.
- The first step in using query string parameters is to set the ‘querystringParams’ and ‘fullMapStart’ plugin options to true.
- The next step would be to set up the search form with the method set to “get” and the action set to your store locator page along with your normal form inputs (address and/or name search fields). So, the form HTML would look something like this instead of the default:
<form id="bh-sl-user-location" method="get" action="/storelocator"> <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" /> </div> <button id="bh-sl-submit" type="submit">Submit</button> </form>
- If you don’t want to use a form, all you have to do is set up your URL with query string parameters that match the “addressID” and/or “searchID” settings. For example, if you’re using the default settings for the addressID and your store locator is on the /storelocator page, a URL would look like:
http://yourdomain.com/storelocator?bh-sl-address=Edina,MN
- If you’ve got the “nameSearch” option set to true you can also use that ID as another parameter. For example:
http://yourdomain.com/storelocator?bh-sl-search=Chipotle
- If you’re using the maxDistance option you can also use that ID as a parameter in version 2.0.8 up. For example:
http://yourdomain.com/storelocator?bh-sl-address=Edina,MN&bh-sl-maxdistance=20
Did everything your tutorial said. I’m able to send the form data from my home page to my map page and the map page loads with /mystorelocator.html?bh-sl-address=55344, but then nothing happens. The map and listings do not load. Do you have a quick example using the query string parameter????? Please? Thank you!
Hi,
I am trying to use your code to just automatically display results without a form, I am trying to follow the above but can not get it to work.
Thanks
Andrew
I figured this out, this code is wonderful, simply used ‘fullMapStart’ set to true, it is amazing what a little reading can do 😉
Yes, that did the trick. Thank you for sharing!
Thanks, forgot to mention that. The post is updated now.
New problem. Thanks to Andrew I have the search from one page and get results in another page working. However, I have another search form on that results page. If I use that search after I use a query string the map and listings do not update.
I’m thinking it has something to do with the query string being stuck in the address bar as /mystorelocator.html?bh-sl-address=55344. Do I need to refresh it somehow. Any help would be appreciated.
This was a bug that should now been fixed with the release of v2.0.8.
Thank you for the posting. You saved my day!
Hi, I’m curious about sorting the map. Do I need to do it in the javascript function? Or I should do it when processing the XML file? Thank you!!!
Hi, in my case its like if I submit the form as http://yourdomain.com/storelocator?bh-sl-address=Edina,MN, then it will just show the FULL MAP along with list of nearest stores by distance. But when I search using the submit button it will actually show the entered location on the map instead of a full map along with list of shops. did I miss anything or is there any way to fix it? Thanks in advance.
This plugin rocks!
But, I am having a hard time returning the count of the search results list.
I would like to return this value to post a notification to the user like “19 results found” based on their search parameters.
There is obviously some sort of counter working to create the list labels, my goal is to hopefully grab this value and run with it — any thoughts?
Hi , thanks for your plugin.
I don’t want to sort adresses ( in left panel ) for distance .
I would like to list in within location.xml. How can i do this ?
Thanks for your helps.
Hi there. I am trying to do exactly as you explain above and I do have it going to the locations page but ALL listings show instead of just the actual result. I don’t know how to set ‘fullMapStart’ or the other one to ‘true’. Is this code I actually have to add in the .js file? If you could let me know how to set these to true and which file to use, that would be really awesome. Thank you!!!!
Hello, have you checked out the query-string-example directory within the dist directory that is downloaded with the plugin? That should give you a good starting point on how to set up your code. The index.html file would be an example of the initial search form and submit.html is an example of a page that the form submits to.
Hi! I had no idea you wrote back! I got it working shortly after and it worked for awhile. I did some edits to the website and something must’ve messed it up as now when I do a search, one result shows but it’s completely wrong. 🙂 Anyway, so I came back here to start from scratch and here you are! Thank you for responding before! I will go read what you wrote and try it again. Thank you so much!
Hello Bjorn,
Great plugin, one of the most useful I have ever used! Thank you so much.
I try to get work the Query string parameter but I have a little problem or perharps a strange behavior. The map always displays all the locations in the limit defined by ‘storeLimit’ (ex. 30) and doesn’t show the locations defined by the query string parameter, as if the parameter wasn’t read.
And when the ‘storeLimit’ is defined to -1, it is impossible to refresh the map, it continues to show all the locations. This last point can be a memory limit as the xml files contains nearly 1600 entries.
Any ideas?
Hello Bjorn,
Thank you for the plugin.
I am able to use the Taxonomy filtering which is currently live select option. But, I want to implement this feature only on the form-submit button. Is it possible to extend that feature currently with the existing form?
Hello Bjorn,
It is urgent situation for us. Can you please help us?
Please reply.
Great example!
Could you put me in the right direction with the following idea?
I want to store the searches into a database (like the bh-sl-address request), but i don’t want to refresh/redirect the page..
i need it to generate a search ‘tag/location’ cloud.
Hi Bjorn,
Am trying to use your solution and am almost there. It looks like the map displays for a split second, then goes away and a screen pops up in its place saying something went wrong. When I look at the javascript console, it says there’s a missing API Key. Did I miss something in your docs about having to acquire a key?
Here’s a link to the site: http://www.kool-pak.com/2016/scr/locator/dist/locator.php
Thanks!
Hi Bjorn,
We are using your plugin to display the map and store locations based on postcode. However there is strange behavior where the some postcode are showing the correct store location however majority of the postcode is showing random listing , even though there is an exact match in the list.
Hi,
Great plugin! Thank you so much.
I have a problem with map zoom I change it in plugin call but it is the same. Is it posible to filter by id and only to display that ids in list, we have multple location that have id 011 and we want to display only them on map and on list. Our url is http://googlemap.byethost7.com/ we using Json example
Thanks
Bjorn,
brilliant plugin and it’s all working well… except one thing on the Query string option. I want to use the maxDistance option for the query string, but on the main map page it shows only the default distance. In fact if you copy your own example to the query string (https://bjornblog.com/storelocator/v2/query-string-example/submit.html?bh-sl-address=Edina,MN&bh-sl-maxdistance=20), you only get the default distance. is there a way to get this working?
I have the max distance set up on the map page and that works fine, but the query string always shows the default distance set by the max distance dropdown instead of overriding it.
Many thanks,
Mike
Hi,
Very nice work.
Is it possible to show the map onload without form and without url parameters : http://yourdomain.com/storelocator?bh-sl-address=
In fact i just need to use your pugin to show store on a map with raw data (without the distance calculator)
$data = ‘
‘;
$(function() {
$(‘#bh-sl-map-container’).storeLocator({
‘dataRaw’:
});
});
Thank’s in advance,
HI,
Is it possible to tie this in with Google Local to display store hours, and that sort of information?
I am trying to use your plugin but, instead of stores, I need to show the top 3 nearest schools to the person’s address that they enter on a form. I have all the lat/longs of the schools in a database. Is there a way to use your plugin but, to use the database of schools to determine and display the top 2 closest schools? Thanks for your help.