Use geolocation in Bubble by requesting the user's browser location through the 'Current geographic position' data source. Store coordinates in a geographic address field on your Data Types. Calculate distances between locations using the ':distance from' operator, and build location-based search by adding geographic constraints to your searches.
Use Geolocation in Your Bubble App
This tutorial shows you how to detect the user's location, store coordinates, calculate distances, and build location-based features like nearby search and distance-based filtering.
Prerequisites
- A Bubble account with an active app
- A Data Type with a geographic address field
- Basic understanding of Bubble expressions
- HTTPS enabled (required for browser geolocation)
Step-by-step guide
Request the User's Location
Request the User's Location
Bubble provides a built-in data source: 'Current geographic position'. This prompts the browser to ask for location permission. Add a Text element displaying 'Current geographic position's latitude' and 'longitude' to verify it works. The first time, the browser shows a permission dialog. After approval, coordinates are available.
Pro tip: Location requests require HTTPS. Preview mode and live apps with custom domains both support this. Non-HTTPS pages will fail silently.
Expected result: The user's latitude and longitude display on the page after granting permission.
Store Location Data in the Database
Store Location Data in the Database
Add a 'location' field (type: geographic address) to your Data Type (e.g., Store, User, Event). When saving, set the location field to 'Current geographic position'. Bubble stores the full geographic address including latitude, longitude, and formatted address string.
Expected result: Records store geographic coordinates that can be used for distance calculations and map display.
Calculate Distances Between Locations
Calculate Distances Between Locations
Use the ':distance from' operator on geographic address fields. Example: 'Current cell's Store's location:distance from Current geographic position' returns the distance in the selected unit (miles or km). Display this in a Text element: 'X miles away'. Use this for sorting: in a Repeating Group, sort by the distance expression.
Expected result: Distances between user and locations are calculated and displayed.
Build Location-Based Search
Build Location-Based Search
In a Repeating Group's data source, add a geographic constraint: Search for Stores where location is within [radius] miles of Current geographic position. Add a Dropdown for radius (1 mi, 5 mi, 10 mi, 25 mi). The search returns only stores within the selected radius. Sort results by distance ascending to show nearest first.
Expected result: Users see only locations within their selected radius, sorted by proximity.
Display Locations on a Map
Display Locations on a Map
Add a Map element to the page. Set the map's marker data source to the same search used for the Repeating Group. Configure marker appearance: each marker shows the store name. Enable auto-zoom to fit all markers. Clicking a marker can display details in a popup or scroll to the corresponding RG item.
Expected result: A map shows markers for all nearby locations matching the search criteria.
Complete working example
1DATA TYPE:2- Store3 - name (text)4 - location (geographic address)5 - category (text)6 - rating (number)78PAGE: nearby910ELEMENTS:11- Dropdown Radius: 1mi, 5mi, 10mi, 25mi12- Map: markers = Search for Stores (location within Dropdown's value mi of Current geo position)13- RepeatingGroup Stores14 - Source: Search for Stores (same constraint, sorted by distance)15 - Cell: name, distance from user, category, rating1617EXPRESSIONS:18- Distance: Current cell's Store's location :distance from Current geographic position :formatted as #.# mi19- Within radius: location is within [radius] mi of Current geographic position2021WORKFLOWS:221. Save User Location → Make changes to Current User: location = Current geographic position232. Search → Update RG and Map data source with radius constraintCommon mistakes when incorporating geolocation in a Bubble.io app: Step-by-Step Guide
Why it's a problem: Not handling the case when the user denies location permission
How to avoid: Add a conditional check: if Current geographic position is empty, show a manual location input or default to a general area.
Why it's a problem: Using geographic filtering with :filtered instead of Search constraints
How to avoid: Use the geographic 'within' constraint directly in the Search, which runs server-side.
Why it's a problem: Not storing location on creation
How to avoid: Always store the geographic address in a field when creating location-based records.
Best practices
- Store locations as geographic address fields for distance calculations and map display.
- Use Search constraints (not :filtered) for location-based queries.
- Provide a fallback for users who deny location permission.
- Cache the user's location in a Custom State to avoid repeated permission prompts.
- Add radius filtering so users control how far they want to search.
- Test geolocation on mobile devices where GPS is more accurate than desktop.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a store locator in Bubble.io. I need to detect the user's location, show nearby stores on a map and in a list, calculate distances, and let users filter by radius. How do I set up geolocation and distance-based search?
Add geolocation to my app. Detect user location, display nearby stores within a selectable radius on a map and in a repeating group, show distances, and sort by proximity.
Frequently asked questions
Does geolocation work on all browsers?
Yes, all modern browsers support geolocation. The user must grant permission, and the page must be served over HTTPS.
How accurate is browser geolocation?
Desktop browsers use IP-based location (city-level accuracy). Mobile browsers use GPS (within 10 meters). Wi-Fi-enabled devices fall in between.
Can I use geolocation without Google Maps?
Yes. Bubble's geographic address fields and distance calculations work independently of any map plugin. You only need a map plugin if you want to display a visual map.
How do I add address autocomplete?
Use Bubble's built-in SearchBox element with 'Geographic places' as the type. This uses Google Places API for address autocomplete.
Is there a cost for geolocation features?
Browser geolocation is free. Google Maps display and Places autocomplete use Google's APIs, which have free tiers but may incur charges at scale. For location-heavy apps, RapidDev can optimize API usage and costs.
Can I track a user's location in real-time?
Bubble does not natively support continuous location tracking. You can periodically update the user's location using a 'Do every X seconds' workflow that saves Current geographic position.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation