How to build car routing in Bubble

The simple, reliable way to build car routing in Bubble is to use a real routing API (most people use Google Directions API) through the API Connector, then display the route on a Map element using its “Draw a route” action. Bubble cannot calculate driving routes by itself; you must call an external routing API and feed Bubble the list of coordinates (polyline) the API returns.

How it works in Bubble

You send the pickup and destination locations to a routing API. The API returns the driving path as a polyline (a compressed list of coordinates). You decode that polyline inside Bubble using a plugin that supports polyline decoding, then use the Map element’s built‑in field List of geographic addresses to draw the route.

• Location fields in Bubble store latitude/longitude.
• Backend workflows help if you need this for many trips automatically.
• Privacy rules should allow “Find geographic addresses” if users need to view routes.

Step-by-step setup

API Connector: create a call to Google Directions.

// GET https://maps.googleapis.com/maps/api/directions/json?origin=<lat1>,<lng1>&destination=<lat2>,<lng2>&key=API_KEY

Bubble will return a JSON that includes overview\_polyline.points.

Install a plugin like “Polyline Decoder” (a real plugin). Decode the polyline → it outputs a list of coordinates.

Place a Map element. In a workflow, use the Map action Draw a route and set “List of geographic positions” to the decoded coordinates.

Live example flow in Bubble

• User chooses “Pickup” and “Destination” (fields of type geographic address).
• Workflow → “Get data from API” (Google Directions) using those two addresses.
• Decode the polyline.
• Map → “Draw a route” with the decoded list.

This produces real car routing with turn‑accurate paths and works for any delivery, taxi, or logistics app.