Home / E-commerce and Business / Store Locator
Store Locator in JavaScript, Free with Live Demo
Free store locator in plain JavaScript. Use your location or pick an area, sort stores by distance with the haversine formula, see which are open now and view them on a simple map.
Runs on: Geolocation API and the haversine formula. Works in all modern browsers. Location needs HTTPS and the visitor's permission.
What is the Store Locator?
A list of nine London stores with a simple map. Share your location or choose an area, and the stores are sorted by distance with the nearest one first.
Each store shows whether it is open right now based on weekday and weekend hours. Tick Open now only to hide the closed ones, and click a store to highlight it on the map.
Good for
- Shops and restaurant chains
- Service centres and clinics
- Stockists of your products
- Pickup and drop off points
What this project does
- Use my location with a fallback area list
- Distance sorting with the haversine formula
- Open now based on opening hours
- Open now only filter
- SVG map with no API key
How it works
- Where are you?The Geolocation API asks for permission and returns latitude and longitude. If people say no, they can pick an area instead.
- Real distanceThe haversine formula works out the distance between two points on a sphere, which is accurate enough for finding a nearby shop.
- A map without a libraryStore positions are scaled from latitude and longitude into an SVG box. Swap in a map library later if you need street detail.
The key JavaScript
This is the heart of the project. The full file has the rest, including the screen layout and error handling.
function haversine(lat1, lng1, lat2, lng2) {
const R = 6371, r = Math.PI / 180; // km
const a = Math.sin((lat2 - lat1) * r / 2) ** 2 +
Math.cos(lat1 * r) * Math.cos(lat2 * r) * Math.sin((lng2 - lng1) * r / 2) ** 2;
return 2 * R * Math.asin(Math.sqrt(a));
}
navigator.geolocation.getCurrentPosition(({ coords }) => {
stores.sort((a, b) => haversine(coords.latitude, coords.longitude, a.lat, a.lng)
- haversine(coords.latitude, coords.longitude, b.lat, b.lng));
});How to use it
- Click Download HTML file above.
- Open the file in a code editor, like VS Code.
- Run it from a local server with
npx serve .so the camera, microphone and AI features are allowed. - Change the text and colors, then upload it to GitHub Pages, Netlify or your own site. It is one file with no build step.
Questions people ask
Do I need a map API key?
Not for this version. The map is a simple SVG. Add a map library later if you need streets and zoom.
Why is my location not used?
Geolocation needs a secure HTTPS page and permission. If it is blocked, the area list still works.
How accurate is the distance?
It is a straight line distance, usually within a few percent. Walking or driving routes will be longer.
More E-commerce and Business projects
071. Shopping Cart with Coupons
A cart drawer with quantities, coupon codes, free shipping progress and saved items
072. Product Variant Picker
A product page where colour and size change the picture, price and stock
073. Product Filter and Sort
A product listing with category, price, colour and rating filters saved in the URL
074. Checkout Form
A one page checkout with address, delivery options, card checks and an order summary
075. Multi-currency Prices
Prices that switch to the visitor's currency with local formatting and neat rounding