# How to incorporate geolocation in a Bubble.io app: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
DATA TYPE:
- Store
  - name (text)
  - location (geographic address)
  - category (text)
  - rating (number)

PAGE: nearby

ELEMENTS:
- Dropdown Radius: 1mi, 5mi, 10mi, 25mi
- Map: markers = Search for Stores (location within Dropdown's value mi of Current geo position)
- RepeatingGroup Stores
  - Source: Search for Stores (same constraint, sorted by distance)
  - Cell: name, distance from user, category, rating

EXPRESSIONS:
- Distance: Current cell's Store's location :distance from Current geographic position :formatted as #.# mi
- Within radius: location is within [radius] mi of Current geographic position

WORKFLOWS:
1. Save User Location → Make changes to Current User: location = Current geographic position
2. Search → Update RG and Map data source with radius constraint
```

## Common mistakes

- **Not handling the case when the user denies location permission** — If the user denies permission, 'Current geographic position' returns empty, causing blank or error states. Fix: Add a conditional check: if Current geographic position is empty, show a manual location input or default to a general area.
- **Using geographic filtering with :filtered instead of Search constraints** — The :filtered operator loads all records then filters client-side, which is slow for large datasets. Fix: Use the geographic 'within' constraint directly in the Search, which runs server-side.
- **Not storing location on creation** — If you only use 'Current geographic position' dynamically, you cannot calculate distances to records without stored coordinates. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/incorporate-geolocation-in-a-bubble-app
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/incorporate-geolocation-in-a-bubble-app