How to build a real-time map in Bubble

A real‑time map in Bubble means you show markers on a map and they update automatically whenever the underlying data changes. Bubble doesn’t have built‑in realtime syncing, but you can get “realtime‑enough” behavior using auto‑binding, Do when data changes events, Option sets / Things with geographic address, and optionally a plugin that supports websockets if you need true push updates.

Main Idea

You store each location as a Thing with a geographic address or lat/lng. You show those Things on a Map element using a search. To make it update automatically, you let Bubble re-run that search whenever data changes by using conditions, custom states, or “Do when condition is true.” For true instant updates, you add a webhook to Bubble’s Backend Workflows and trigger map refresh when new data arrives.

How to Build It (Step‑by‑Step)

• Create a Data Type, for example Location, with a field address (geographic address) and anything else you need (name, type, status).
• Place the Bubble Map element on the page. Set “List of markers” to Search for Locations.
• Choose your marker title field (ex: Location’s name).
• To make the map update, place a hidden element (like a text or group) with dynamic data count such as “Search for Locations:count.” Then add a workflow Do when condition is true that fires when this count changes. Inside it, use “Element actions → Map → Recenter/Reset map.”
• If you need external realtime (like a driver updating location every second), send webhooks into Bubble. A backend workflow updates the Location Thing, which updates your search result, which triggers the condition above.
• For higher-frequency updates (sub‑second), Bubble alone won’t do it; use a plugin with websockets (like Pusher or Ably) to push a trigger into the page, then run a workflow to refresh the map markers.

Simple Backend Workflow Example

{
  "location_id": "168901234567x123",
  "lat": 40.7128,
  "lng": -74.0060
}
// Send this JSON to your Bubble webhook URL.
// Your workflow updates the Location's address using "Calculate address from lat/long".

Important Tips

• Bubble’s map doesn’t auto-refresh itself; you must trigger refresh with conditions or a websocket event.
• Use geographic address for native marker placement; Bubble converts lat/lng using “Calculate geographic address.”
• Use lightweight searches. If you track many markers, constrain by distance.