# How to set up location-based services in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans (Google Maps API key required)
- Last updated: March 2026

## TL;DR

Location-based services in Bubble use the geographic address field type and Google Maps API to enable proximity searches, map displays, and location-aware features. This tutorial covers enabling the Google Maps API in your Bubble app, configuring geographic address fields on Data Types, building proximity-based search within a specified radius, and displaying results on a map element.

## Overview: Setting Up Location-Based Services in Bubble

This tutorial shows you how to set up location infrastructure in your Bubble app. You will enable the Google Maps API, configure geographic address fields on your Data Types, build search functionality that finds records within a certain distance, and display results on an interactive map.

## Before you start

- A Bubble app on any plan
- A Google Cloud Platform account with billing enabled
- Google Maps JavaScript API and Places API enabled in your GCP project
- A Google Maps API key

## Step-by-step guide

### 1. Enable Google Maps API in Bubble

Go to Settings in the Bubble editor, then click the General tab. Find the Google Maps API key field and paste your Google Maps API key. This key enables the Map element, geographic address inputs, and location-based searches throughout your app. In your Google Cloud Console, make sure you have enabled: Maps JavaScript API, Places API, and Geocoding API. Restrict the API key to your Bubble app's domain for security.

**Expected result:** Google Maps is configured in your Bubble app, enabling map elements and geographic search.

### 2. Add geographic address fields to your Data Types

In the Data tab, add a field of type 'geographic address' to any Data Type that needs location data. For example, add a 'location' field to a Business Data Type. The geographic address type stores a formatted address string plus latitude and longitude coordinates automatically. When users enter an address using a Search Box element (configured with geographic places), Bubble geocodes it and stores the full location data. You can access the latitude and longitude from the stored address for custom calculations.

**Expected result:** Your Data Types have geographic address fields that store full location data including coordinates.

### 3. Build a proximity search feature

Create a search page with a Search Box element (set to Geographic places for the choices style) where users enter their location or a target address. Add a Dropdown or Input for the search radius (e.g., 5, 10, 25, 50 miles). Add a Repeating Group with data source: Do a Search for Businesses with a geographic constraint. In the search constraint, select the location field, choose 'is within' as the operator, enter the radius value from your input, and set the center point to the Search Box's geographic value. Results are automatically sorted by distance when using geographic constraints.

> Pro tip: Bubble's geographic search uses 'is within X miles/km of [address]' as a native constraint — no custom calculations needed.

**Expected result:** Users can search for nearby records within a specified radius of any location.

### 4. Display results on an interactive map

Add a Map element to your page. Set the map's data source to the same search used in your Repeating Group (Do a Search for Businesses with the geographic constraint). Set the marker address field to the location field of your Data Type. Bubble automatically places markers on the map for each result. Customize marker colors and info windows by configuring the Map element properties. The map and Repeating Group share the same data source, so filtering the list also filters the map markers.

**Expected result:** Search results appear as markers on an interactive map alongside the list view.

### 5. Detect the user's current location

To auto-detect the user's location, use the 'Current geographic position' data source in Bubble. This prompts the browser for location permission. Use it as the default center point for your map and search. Set the Map's center to Current geographic position. For the search, pre-fill the Search Box or use Current geographic position directly as the center constraint. Handle the case where the user denies location permission by falling back to a default location or showing a manual address input.

**Expected result:** The app detects the user's location automatically and centers the map and search on their position.

## Complete code example

File: `Workflow summary`

```text
LOCATION-BASED SERVICES ARCHITECTURE
======================================

SETUP:
  Settings → General → Google Maps API key
  GCP APIs enabled: Maps JavaScript, Places, Geocoding
  API key restricted to app domain

DATA TYPE:
  Business:
    - name: text
    - location: geographic address
    - category: Option Set
    - description: text

SEARCH PAGE:
  Search Box element:
    Choices style: Geographic places
    → Stores user's target location

  Radius selector:
    Dropdown: 5, 10, 25, 50 miles

  Repeating Group:
    Source: Do a Search for Businesses
    Constraint: location within [radius] miles of [Search Box value]
    Sort: distance (automatic with geographic constraint)

  Map element:
    Source: Same search as Repeating Group
    Marker address: location field
    Center: Search Box value or Current geographic position

USER LOCATION DETECTION:
  Data source: Current geographic position
  Requires: Browser location permission
  Fallback: Manual address input
```

## Common mistakes

- **Not enabling all required Google Maps APIs in GCP** — Bubble needs Maps JavaScript API for the map display, Places API for address autocomplete, and Geocoding API for converting addresses to coordinates. Missing any of these causes features to fail silently. Fix: Enable Maps JavaScript API, Places API, and Geocoding API in your Google Cloud Console
- **Using text fields instead of geographic address fields for locations** — Text fields store only the address string without latitude/longitude, making proximity searches impossible Fix: Use the geographic address field type which automatically stores coordinates alongside the formatted address
- **Not handling denied location permission** — If the user denies browser location access, Current geographic position returns empty, breaking any feature that depends on it Fix: Add a fallback: check if Current geographic position is empty and show a manual address input instead

## Best practices

- Restrict your Google Maps API key to your app's domain to prevent unauthorized usage
- Use geographic address fields on Data Types for any location data that needs proximity searching
- Provide a manual address input as fallback when browser location detection fails
- Share the same data source between the map and Repeating Group for consistent filtering
- Limit search results to a reasonable number (50-100) to keep the map readable
- Cache frequently searched locations to reduce Google Maps API calls and costs

## Frequently asked questions

### Does using Google Maps in Bubble cost money?

Google provides $200 of free Maps API usage monthly, which covers roughly 28,000 map loads. Beyond that, you pay per API call. Monitor usage in your Google Cloud Console.

### Can I search by distance in kilometers instead of miles?

Yes. Bubble's geographic constraint supports both miles and kilometers. Select the unit in the constraint configuration.

### How accurate is Bubble's geographic search?

Very accurate. Bubble uses latitude/longitude coordinates stored in the geographic address field for distance calculations, providing results accurate to within meters.

### Can I use OpenStreetMap instead of Google Maps?

Bubble's native Map element uses Google Maps. For OpenStreetMap, you would need to embed Leaflet.js via an HTML element, which requires more manual setup.

### Can RapidDev help build location-based features in Bubble?

Yes. RapidDev can implement complete location services including proximity search, interactive maps, geofencing, and location-based notifications for your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-location-based-services-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-location-based-services-in-bubble