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.
| Fact | Value |
|---|---|
| Tool | Bubble |
| Difficulty | Advanced |
| Time required | 30-40 min |
| Compatibility | All Bubble plans (Google Maps API key required) |
| Last updated | March 2026 |
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.
Prerequisites
- 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
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.
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.
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.
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.
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.
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 working example
1REAL-TIME MAP — WORKFLOW SUMMARY2==================================34DATA TYPE: Driver5 current_location (geographic address)6 last_updated (date)7 status (text: active/idle/offline)8 heading (number, optional)9 speed (number, optional)1011MAP ELEMENT:12 Type of markers: Driver13 Data source: Search for Drivers (status = active)14 Marker address: current_location15 Caption: Current marker's name + status1617BACKEND WORKFLOW: update_location18 Parameters: driver_id (text), lat (number), lng (number)19 Actions:20 Make changes to Driver (unique_id = driver_id):21 current_location = Geographic address(lat, lng)22 last_updated = Current date/time23 Exposed as public API endpoint2425AUTO-REFRESH (backup):26 Event: Do every 10 seconds27 Action: Display list in Map → fresh search2829MARKER CLICK:30 Event: Map marker is clicked31 Action: Display data in FloatingGroup32 Shows: name, status, last_updated, speed3334CONDITIONAL MARKERS:35 Active (updated < 5 min ago): green icon36 Stale (updated > 5 min ago): grey icon37 Offline: red iconCommon mistakes when creating a Real-Time Map in Bubble
Why it's a problem: Refreshing the map too frequently causing high WU consumption
How to avoid: Use Bubble's native live data (auto-updates via WebSocket) as primary, and only add timed refresh at 10-30 second intervals as backup
Why it's a problem: Not validating GPS coordinates before storing
How to avoid: Add validation in the backend workflow: only update if latitude is between -90 and 90, and longitude is between -180 and 180
Why it's a problem: Displaying all markers regardless of status or freshness
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a delivery tracking app in Bubble.io. I need a map that shows delivery drivers moving in real time. How do I update driver GPS positions from a mobile app and display them on a live map?
Create a real-time tracking map on my dashboard page. Show all active Driver records as markers on a Google Map. The markers should update automatically when the driver's current_location changes. Add a backend API workflow that accepts latitude and longitude to update positions.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation