How to build a store locator - Bubble.io tutorial

Be the first to hear about our latest tutorials, plugin releases, updates and more: https://www.cranfordtech.com/newsletter

In this video tutorial, I'll show how you can build an interactive store locator using Bubble. While it's pretty straightforward to create a basic store locator, we'll go through some advanced tricks that will give your map that extra bit of oomph. Specifically, I'll go through:

• How to add custom markers to your map
• Adding dynamic content to each markers' popup to display the store address, opening hours and a custom image
• Zooming in on a location when the user clicks on the relevant repeating group cell
• Formatting the store list so that stores are sorted by how close they are to the search location
• Flying to the location that the user searches for

Links
📍 Beautiful Maps - Mapbox plugin
https://bubble.io/plugin/beautiful-ma...

💡 Demo app and documentation
https://beautiful-maps-mapbox.bubblea...

🗺️ Mapbox
https://www.mapbox.com/

📧 Plugin Support
https://www.cranfordtech.com/contact

🎨 Check out our other Templates and Plugins
https://bubble.io/contributor/cranfor...

💼 Hire me for Bubble Consulting/Freelancing
https://www.cranfordtech.com/agency

🤑 Get $15 off your first Bubble plan
https://bubble.io/?ref=jq28ggah

Timeline
00:00 Introduction
00:32 Mapbox
01:19 Beautiful Maps - Mapbox plugin
02:39 Setting up our canvas and adding a Mapbox map element
04:02 Database setup
05:37 Creating an admin panel to add locations
16:54 Adding markers to our store locator map
24:00 Adding the list of stores side section
32:10 Displaying content in a popup for each marker
36:22 Custom icons for markers
38:27 Linking the locations in the store list to a marker on the map
42:15 Using HTML to display detailed info in a popup
55:16 Searching for different locations