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