We built this because we got tired of seeing clients pay for things that should be free. The store locator market is a scam. Free plans let you add just a few maps and a few pins. The moment your business starts doing well and more people visit your site, the price goes up fast. You end up paying hundreds every month just for a map with pins on it.
And if you only have a few locations to show, it's even worse. You have to open a new account. Connect it to Webflow. Sync your data between two different tools. All of that just to show 15 pins on a map. When your locations are already in your Webflow CMS.
So we built our own. 100% inside Webflow. We shared it for free, and over 70 people have cloned it so far. Now we're back with v2.
---
Version 2.0.0 — a full rewrite with 4 ready-to-use variants.
LINK - https://webflow.com/made-in-webflow/website/store-locator-with-mapbox-leaflet
Inside the project you'll find 4 pages:
- Mapbox with Finsweet filters
- Mapbox without filters
- Leaflet with Finsweet filters
- Leaflet without filters
Pick the one you like, clone the project, and you're ready to go.
---
What's new
Two engines. Choose Mapbox for a premium look (you need a free account) or Leaflet for a fully open source map with no API keys and no costs.
Attributes first. Everything works with ns-map="..." custom attributes. You can rename classes, move things around, change the layout. It still works.
Markers designed in the Designer. No more CSS tricks. Design your markers like any other Webflow element, give them a category, and that's it. Different icons for different categories (pizza, restaurant, bar, whatever you want) are placed on the map for you.
Popups from the CMS. Design them like any Webflow block inside each CMS item. The script puts them inside the map popup.
Better address search. It works with both coordinates and addresses. The old version used a Mapbox feature that stopped working well. We fixed it. Now it just works.
Works with Finsweet Attributes. Filter by "restaurants" and the pizza markers disappear. Filter by "pizza" and the restaurants disappear.
Built with the Lumos styleguide, but works with any design system.
---
What you need to edit
Head code. Just the popup tip color.
Body code. Your Mapbox token, your map style, and your starting coordinates. Zoom levels are inside the script with clear notes next to each one. Easy to find and change.
Everything else you do in the Designer.
---
We don't want our clients stuck paying another subscription for something a small script can do. If you're an agency like us, just clone it, change it, ship it. You don't need to give credits. But a mention wouldn't hurt.
Write to us if you have questions or ideas for v3.
With ❤️ Nisium