Bubble.io Google Maps Integration: Location Features in Your App
Maps, address autocomplete, distance calculation, and reverse geocoding — all in Bubble via the Google Maps API. A four-step setup guide, the radius search pattern using lat/lng bounding boxes, and why coordinates must be stored separately from addresses.
Why and How to Add Maps to Your Application
Location-based features — displaying a map of nearby businesses, calculating distances, showing delivery routes, or letting users set a location on a map — are common requirements in field service apps, delivery platforms, property tools, and any business with a geographic component. Bubble integrates with Google Maps through both a dedicated plugin and direct API calls, giving you a wide range of location capabilities.
What You Can Build
Display a Map
Show a Google Map on any page with custom markers for database records. Use the Map plugin or embed the Maps JavaScript API via an HTML element. Each marker can be clickable and can display an info window with record details. Essential for any property, venue, or location-based listing.
Address Autocomplete
As a user types an address, show matching suggestions from Google Places. Selecting a suggestion populates the address fields automatically and stores the geocoded latitude/longitude. Eliminates address entry errors and ensures clean, geocodable address data.
Distance Calculation
Calculate the distance between two points using the Directions API or the Distance Matrix API. ‘Show me service providers within 10 miles of my postcode.’ ‘Calculate the delivery distance from our depot to this order address.’ Built in a backend API workflow to keep keys private.
Reverse Geocoding
Convert a latitude/longitude coordinate (from a user’s browser geolocation) to a human-readable address. A field service app uses the technician’s GPS location to auto-fill the job address. A delivery app shows the driver’s current address in real time.
Step-by-Step
Go to console.cloud.google.com. Create a new project. Enable: Maps JavaScript API, Places API, Geocoding API, and Directions API (enable only what you need). Create an API key. Restrict the key to your app’s domain for security.
In Bubble’s Plugin marketplace, search for ‘Google’ and install the official Google Maps plugin (or BDK Maps for more advanced features). Enter your API key in the plugin settings. The Map element now appears in your UI builder element list.
Data type
: Location (or any type with an address/coordinate field)
Data source
: Search for Locations [workspace = current workspace]
Address field
: Location’s address
Lat field
: Location’s latitude
Lng field
: Location’s longitude
// Each record appears as a marker at its coordinate
// Install the Address Autocomplete plugin
Input type
: Address (Google Places)
// On selection, store the structured address and coordinates
Workflow
: When Address input’s value changes
Update record
address = Address input’s formatted address
latitude = Address input’s lat
longitude = Address input’s lng
city = Address input’s city
postcode = Address input’s postal code
Finding Records Within a Radius
// Step 1: Geocode the search postcode to get lat/lng
POST https://maps.googleapis.com/maps/api/geocode/json
?address=[postcode_parameter]&key=[PRIVATE_API_KEY]
// Returns: results[0].geometry.location.lat and .lng
// Step 2: Search for providers and filter by distance
// Bubble has no native radius search — filter approach:
Search for Providers [
is_active = yes,
latitude > search_lat – 0.15, // approx 10 miles latitude
latitude < search_lat + 0.15,
longitude > search_lng – 0.22, // approx 10 miles longitude
longitude < search_lng + 0.22
]
// Then calculate exact distance for each result
// and filter out those beyond the target radius
Store Coordinates as Separate Fields, Not a Geographic Address
Bubble’s geographic address field type is useful for displaying addresses but does not support numeric comparison (greater than, less than) needed for radius search. Always store latitude and longitude as separate number fields alongside the address. This enables the bounding box search pattern and any future distance calculation you might need.
Build Your Bubble.io App With Expert Help
Pakistan’s leading Bubble.io development team. Multi-tenant SaaS architecture, Stripe billing, and full product builds done right from day one.
