Google Maps for Bubble native mobile apps: custom markers with clustering, map
styles, live GPS location, zoom and locate controls, data layers, place search
and driving routes, all controlled from workflows.
- Element:
Google Map
- Platform: Bubble native mobile apps (also runs in Bubble’s web preview)
- Dependencies: none to install; it uses the libraries the mobile runtime ships
- Google APIs: Maps JavaScript API (required), Routes API, Places API (New), Geocoding API
51 fields, 33 states, 14 events and 30 actions.
Quick start
- Get an API key. In console.cloud.google.com
create a project, link billing, enable Maps JavaScript API and create an
API key (details below).
- Declare location use in your app’s mobile settings: “This app uses your
location to show where you are on the map and to plan routes.”
- Place the element. Drag Google Map onto a mobile page, give it the size
and corners you want (300 points tall or more) and paste your key into
api_key.
- Add markers. Set
marker_locations to a list of addresses, such as
Search for Stores:each item’s Address.
That is a working map. Everything below is optional.
Your Google API key
| API |
What it powers |
Needed |
| Maps JavaScript API |
The map |
Always |
| Routes API |
Routes |
For routes |
| Places API (New) |
The search bar |
For search |
| Geocoding API |
Address lookups when the phone cannot do them |
Recommended |
- APIs & Services → Library: enable the APIs above. Note the names: Places
API (New), not the legacy Places API, and Routes API, not the legacy
Directions API (Google no longer lets new projects enable Directions).