An open-source, lightweight, and embeddable store locator plugin built using HTML, CSS, and vanilla JavaScript. Ideal for businesses wanting to showcase their physical locations on an interactive map. (Download ZIP)
- Responsive design
- Integrated Google Maps with custom or embedded options
- Takes User GEO location as input and shows nearest stores
- If GEO location is rejected uses IP instead to get approximate location
- Search by area, city, or PIN code
- Tap-to-call support
- Lightweight: No external libraries except Google Maps API
- Plug-and-play architecture
- Easily customizable with pure HTML, CSS, and JS
- Insert this inside your HTML:
<div id="store-locator"></div> - Make sure to add the files in a folder named
locator-pluginin your root directory
Inside your <head> tag, include:
<link rel="stylesheet" href="locator-plugin/store-locator.css">
<script src="locator-plugin/store-locator.js"></script>You can format your data using the provided store_data.xlsx and follow these steps:
- Fill in your store info.
- Export the sheet as
.csv. - Use
json-formatter.htmlto convert CSV → JSON.
📌 Required fields:
name,city,phone,timings,map- Provide
<iframe>link of the location in themapfield, the script will automatically extract lattitude and longtitude.
Provide either:
state,postal_code,country- OR a complete address string in
address.
At the bottom of your page:
<script>
Storelocator.init({
container: "#store-locator",
dataUrl: "dummy-stores.json",
"custom-map": true,
"gmap-api": "YOUR_GOOGLE_CLOUD_API"
});
</script>If you do not initialise dataUrl:, it will atomatically be set as stores.json.
If you want to use the default embedded map, you do not need to call custom-map or provide a gmap-api key.
The sample data included simulates store locations across West Bengal. All phone numbers, names, and cities have been randomized or anonymized to maintain privacy.
locator-plugin/
│
├── data/
│ ├── stores.json
│ └── dummy-stores.json
│
├── icons/
│ ├── default-icon.png
│ └── highlighted-icon.png
│
├── store-locator.css
├── store-locator.js
├── json-formatter.html
└── LICENSEThis plugin is licensed under the Custom MIT-Based License. You are free to use or integrate it commercially, provided:
- You do not sell it or derivative works.
- You do not distribute modified or unmodified versions without this license.
- Commercial use is allowed only if not sold as a product to end clients.
Ownership and authorship belong to:
- GitHub: @GitExplorer001
- LinkedIn: Anish Ghosh
🌟 Give this repo a ⭐ if you found it helpful!