bjorn2404 / jquery-store-locator-plugin Goto Github PK
View Code? Open in Web Editor NEWA store locator plugin using Google Maps API version 3
License: MIT License
A store locator plugin using Google Maps API version 3
License: MIT License
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!
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?
Hi when I add some custom markers all the markers lost theirs correlation letter?
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 ?
Hi Bjorn,
Is there a way to get the count of the found location after search?
Thank you for sharing this.
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
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.
Hi,
Is it possible to pass an url parameter ? And display directly the correct markers on the map the first time the page load?
For example "http://www.mydomain.com/storelocator?city=london
This would display all the London markers to someone coming from another page ( he clicked on a link on the previous page for example )
Thanks for this great plugin, very usefull.
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
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!
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
});
});
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 = '';
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 :)
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
Hey!
How can i hide the map without destroy the result-list? If i hide the map my result list dont show...
Hi Bjorn,
I have submitted some other issues in my previous post which is closed, are you still receiving notifications??
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 ?
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!
Hey,
Would like to ask if possible on example: http://bjornblog.com/storelocator/autogeocode-example.html
if no location found, to load the map with the areas. That, because trying the Geolocation on multiple areas in Greece, does not work at all...
Thanks
Has anyone been able to do this ? Only show the nearest location or none, I want to avoid showing all of them.
@bjorn2404 explained it on the blog: http://www.bjornblog.com/web/jquery-store-locator-plugin#comment-15972 but is there a way to do it server side ?
thanks..awesome plugin by the way
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
Maybe a Handlebar Helper would be the correct way to achieve what we're trying with this ? :}
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'
}
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
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!
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.
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!
When clicking for directions, would it be possible to show the directions directly on the map rather than opening a new window?
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',
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.
$(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.
dataLocation is great, but what about giving the ability to use the json string?
data: '{json, string, here}'
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
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.
Is it possible Default Location with two markers/two Latitudes and two Longitude?
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
});
}
...
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!
You have a pretag in your template that use niceURL but where is this defined?
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.
How to show the nearest store on the map by default showing the infobox no matter how far it is?
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
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
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!
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.
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.
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!!
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!
Hello.
I am using this plugin to ad an extension of Joomla.
How do I get the plugin the value of latitude and longitude, by default it takes "lat" and "lng"?
Thank U!
Hi @bjorn2404
I added a new parameter to only display on the list the store of which the marker is visible on the map.
If you think there is a better way to do this, let me know.
Hope it helps other.
Cheers,
Would like to add map styling using https://snazzymaps.com/style/18566/red-darkness
but not sure where I could insert the code any help would be appreciated.
Thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.