# How to Create a Real-Time Map in Bubble

- Tool: Bubble
- Difficulty: Advanced
- Time required: 30-40 min
- Compatibility: All Bubble plans (Google Maps API key required)
- Last updated: March 2026

## TL;DR

A real-time map in Bubble combines the built-in Map element with auto-refreshing data to show moving markers. You store GPS coordinates in the database, update them from mobile devices or backend workflows, and use Bubble's live data feature or a timed refresh to keep the map current. This is ideal for delivery tracking, fleet management, or location-sharing features.

## Overview: Real-Time Maps in Bubble

This tutorial shows you how to build a live-updating map for tracking movement — delivery drivers, fleet vehicles, or user locations. You will configure the Map element with auto-refreshing data, set up backend workflows to update coordinates, and implement both Bubble's native live data and manual timed refresh approaches.

## Before you start

- A Bubble app with a Google Maps API key configured
- A Data Type representing the tracked entity (e.g., Driver, Vehicle)
- A geographic address field on that Data Type for GPS coordinates
- Familiarity with Bubble's Map element and backend workflows

## Step-by-step guide

### 1. Create a Data Type to store real-time positions

In the Data tab, create or update your tracking Data Type (e.g., 'Driver'). Add a field called 'current_location' of type 'geographic address'. Add a 'last_updated' date field to track freshness. Add a 'status' text field for values like 'active', 'idle', 'offline'. Optionally add 'heading' (number) and 'speed' (number) fields if you want directional markers.

**Expected result:** Your Data Type has fields for current GPS location, last update time, and activity status.

### 2. Set up the Map element with live data source

On your tracking dashboard page, add a Map element. Set 'Type of markers' to your tracking Data Type. Set the data source to 'Do a search for Drivers' with a constraint 'status is active'. Under 'Marker address', select the 'current_location' field. Bubble's built-in live data feature means that when the Map's data source is a search placed directly on a page element, it auto-updates when underlying records change. This gives you near-real-time marker movement without manual refresh.

> Pro tip: Bubble's auto-updating searches work via WebSocket connection. The map will update within seconds of a database change. For faster updates, consider a timed 'Do every X seconds' approach.

**Expected result:** A map displays all active drivers as markers that update automatically when their location records change.

### 3. Build a location update endpoint for mobile devices

Go to the backend workflows editor (Pages dropdown → Backend workflows). Create a new API workflow called 'update_location'. Add parameters: 'driver_id' (text), 'latitude' (number), 'longitude' (number). In the workflow, use 'Make changes to a Thing' targeting the Driver whose unique_id is the driver_id parameter. Set current_location using the 'Geographic address from coordinates' operator with the latitude and longitude parameters. Set last_updated to Current date/time. Expose this workflow as a public API endpoint so mobile apps can call it.

**Expected result:** A backend API endpoint accepts latitude/longitude and updates the driver's position in the database.

### 4. Add timed auto-refresh as a backup mechanism

While Bubble's live data usually handles updates, add a backup refresh. On the tracking page, add a 'Do every 10 seconds' workflow event. In the workflow, use the 'Display list in Map' action to re-set the map's data source to a fresh search. This ensures the map stays current even if the WebSocket connection drops. You can adjust the interval — 5 seconds for faster tracking, 30 seconds for lower WU consumption.

**Expected result:** The map refreshes its marker data on a regular interval as a fallback for real-time updates.

### 5. Display driver details on marker click

Enable 'Show marker caption' on the Map element. Set the caption to show the driver's name and status. For richer detail, add a Floating Group that shows full driver information. Create a workflow: 'When a Map marker is clicked' — display data in the Floating Group using 'Current marker's Driver', show the driver's name, last updated time, speed, and a 'Call driver' button. Position the Floating Group near the map.

**Expected result:** Clicking a map marker shows detailed driver information in a popup or floating panel.

### 6. Add visual indicators for stale or offline markers

Use conditional formatting on the Map element to show different marker icons based on freshness. Add conditions: 'When Current marker's last_updated is less than Current date/time minus 5 minutes' → use a grey marker icon (stale). 'When Current marker's status is offline' → use a red marker icon. Keep the default green icon for active, recently-updated markers. This helps operators quickly identify drivers who may have connectivity issues.

**Expected result:** Markers change color based on data freshness — green for active, grey for stale, red for offline.

## Complete code example

File: `Workflow summary`

```text
REAL-TIME MAP — WORKFLOW SUMMARY
==================================

DATA TYPE: Driver
  current_location (geographic address)
  last_updated (date)
  status (text: active/idle/offline)
  heading (number, optional)
  speed (number, optional)

MAP ELEMENT:
  Type of markers: Driver
  Data source: Search for Drivers (status = active)
  Marker address: current_location
  Caption: Current marker's name + status

BACKEND WORKFLOW: update_location
  Parameters: driver_id (text), lat (number), lng (number)
  Actions:
    Make changes to Driver (unique_id = driver_id):
      current_location = Geographic address(lat, lng)
      last_updated = Current date/time
  Exposed as public API endpoint

AUTO-REFRESH (backup):
  Event: Do every 10 seconds
  Action: Display list in Map → fresh search

MARKER CLICK:
  Event: Map marker is clicked
  Action: Display data in FloatingGroup
  Shows: name, status, last_updated, speed

CONDITIONAL MARKERS:
  Active (updated < 5 min ago): green icon
  Stale (updated > 5 min ago): grey icon
  Offline: red icon
```

## Common mistakes

- **Refreshing the map too frequently causing high WU consumption** — Each refresh triggers a database search that costs WUs — refreshing every second can consume thousands of WUs per hour Fix: Use Bubble's native live data (auto-updates via WebSocket) as primary, and only add timed refresh at 10-30 second intervals as backup
- **Not validating GPS coordinates before storing** — Invalid or zero coordinates cause markers to appear at incorrect locations (commonly 0,0 in the Gulf of Guinea) Fix: Add validation in the backend workflow: only update if latitude is between -90 and 90, and longitude is between -180 and 180
- **Displaying all markers regardless of status or freshness** — Offline or stale markers clutter the map and make it hard to identify active entities Fix: Filter the data source to show only active markers, and use conditional icons for different freshness levels

## Best practices

- Rely on Bubble's live data feature first and use timed refresh only as a backup
- Filter map markers to show only active or relevant entities to reduce clutter and WU cost
- Store a 'last_updated' timestamp with every location update for freshness tracking
- Use conditional marker icons to visually distinguish active, stale, and offline entities
- Throttle location updates from mobile devices to every 5-15 seconds to balance accuracy and WU cost
- Add a 'last seen' display next to each marker to help operators identify connectivity issues
- Consider using a dedicated tracking service (like Google Firebase Realtime Database) for sub-second updates

## Frequently asked questions

### How fast do map markers update in Bubble?

With Bubble's live data feature, markers update within 1-5 seconds of a database change. For faster updates, you can add a timed refresh or use an external real-time service.

### Can I show the path or trail of a moving marker?

The built-in Map element does not support polylines. You would need a plugin or custom HTML/JS map implementation to draw paths from stored location history.

### How many markers can the map handle before performance degrades?

The Bubble Map element works well with up to 100-200 markers. Beyond that, consider clustering markers or filtering to show only markers within the current viewport.

### What is the WU cost of real-time map updates?

Each search refresh costs approximately 0.2 WU base plus data transmission. With 10-second refresh and 50 markers, expect roughly 500-1,000 WU per hour per viewer.

### Can RapidDev help build a fleet tracking application in Bubble?

Yes. RapidDev can build complete fleet management systems with real-time tracking, route optimization, driver assignments, and delivery status updates in Bubble.

### Can I use this for ride-sharing or taxi apps?

Yes, the same architecture works for ride-sharing. Add features like rider pickup location, driver-rider matching, and trip status tracking to extend this into a full ride-sharing flow.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-real-time-map-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-real-time-map-in-bubble