Bubble includes a built-in Map element powered by Google Maps that displays markers from your database. You configure a Google Maps API key in your Bubble settings, add the Map element to your page, connect it to a data source with geographic address fields, and customize marker appearance. This tutorial covers API key setup, map configuration, dynamic markers, and user geolocation.
Overview: Google Maps in Bubble
This tutorial walks you through adding Google Maps functionality to your Bubble app. You will set up a Google Maps API key, add the built-in Map element, connect it to your database to display markers, customize pin icons, and optionally detect the user's location for location-based features.
Prerequisites
- A Bubble app on any plan
- A Google Cloud Platform account with a Maps API key
- A Data Type with a geographic address field to display on the map
- Google Maps JavaScript API and Places API enabled in your GCP project
Step-by-step guide
Set up your Google Maps API key in Bubble
Set up your Google Maps API key in Bubble
Go to Settings in your Bubble editor and click the General tab. Scroll to the 'API Keys' section. Find the 'Google Maps API Key' field and paste your API key from Google Cloud Platform. To get this key, go to console.cloud.google.com → APIs & Services → Credentials → Create Credentials → API Key. Then enable the Maps JavaScript API and Places API under APIs & Services → Library. Restrict the key to your Bubble domain (yourapp.bubbleapps.io and any custom domains) under Application restrictions → HTTP referrers.
Pro tip: Always restrict your Google Maps API key to your domain to prevent unauthorized usage and unexpected billing charges.
Expected result: Your Google Maps API key is saved in Bubble settings and the Maps JavaScript API is enabled in Google Cloud.
Add the Map element to your page
Add the Map element to your page
In the Design tab, click the '+' icon and search for 'Map'. Drag the Map element onto your page and resize it. In the property editor, set the initial map center by entering a default address or coordinates. Set the default zoom level (10-12 for city level, 14-16 for neighborhood). You can choose the map type (roadmap, satellite, hybrid, or terrain). The map will display immediately in the editor preview.
Expected result: A Google Map displays on your page centered at the default location with the selected zoom level.
Connect database records as map markers
Connect database records as map markers
In the Map element's property editor, set the 'Type of markers' to your Data Type (e.g., 'Restaurant' or 'Property'). Set the 'Data source' to a search — 'Do a search for Restaurants' with any filters you need. Under 'Marker address', choose the geographic address field from your Data Type. Each record with a valid address will appear as a pin on the map. To display info when a marker is clicked, check 'Show marker caption' and set it to a dynamic expression like 'Current marker's name'.
Expected result: Database records with geographic addresses appear as markers on the map, and clicking a marker shows its caption.
Customize marker icons and appearance
Customize marker icons and appearance
To use custom marker icons, go to the Map element's Appearance tab. Under 'Custom marker icon', upload or link to a PNG image for the marker (recommended size: 32x32 or 48x48 pixels). You can also use conditional markers — in the Conditional tab, set different icons based on data. For example: 'When Current marker's category is Restaurant' → use a restaurant icon; 'When Current marker's category is Hotel' → use a hotel icon.
Pro tip: Use PNG images with transparent backgrounds for clean-looking custom markers. Keep file size small for fast map loading.
Expected result: Map markers display your custom icons, with different icons possible based on data conditions.
Detect and use the user's current location
Detect and use the user's current location
To show the user's location on the map, use the 'Current geographic position' data source. In the Map element's properties, set the center to 'Current geographic position'. The browser will prompt the user for location permission. To add a 'locate me' button, create a Button element with a workflow that sets the map's center address to 'Current geographic position' using the 'Set map center' action. Note: this only works over HTTPS and requires user permission.
Expected result: The map centers on the user's current location when they grant permission, with a button to re-center at any time.
Add a search box to filter map markers by location
Add a search box to filter map markers by location
Add a Search Box element (not a regular input) to your page. Set its 'Geographic places' option to 'yes'. When the user types an address, the Search Box provides autocomplete suggestions from Google Places. Create a workflow: when the Search Box value changes, update the Map element's center to the Search Box's value geographic address, and optionally filter the Repeating Group or map data source to show only nearby results.
Expected result: Users can search for a location, the map re-centers to that area, and markers update based on proximity.
Complete working example
1GOOGLE MAPS SETUP — WORKFLOW SUMMARY2======================================34API KEY SETUP:5 Settings → General → Google Maps API Key6 Google Cloud: Enable Maps JavaScript API + Places API7 Restrict key to: yourapp.bubbleapps.io89MAP ELEMENT CONFIGURATION:10 Type of markers: [Your Data Type]11 Data source: Do a search for [Type]12 Marker address: [geographic address field]13 Show marker caption: yes14 Caption: Current marker's [display field]15 Default zoom: 12 (city) / 15 (neighborhood)1617CUSTOM MARKERS:18 Appearance → Custom marker icon → Upload PNG19 Conditional icons:20 When Current marker's category = X → icon_x.png21 When Current marker's category = Y → icon_y.png2223USER LOCATION:24 Map center: Current geographic position25 Locate Me button workflow:26 Action: Set map center → Current geographic position2728LOCATION SEARCH:29 Search Box element (Geographic places = yes)30 Workflow: SearchBox value changes31 Action: Set map center → SearchBox's value32 Optionally filter data source by proximityCommon mistakes when adding Google Maps to a Bubble App
Why it's a problem: Not enabling the Maps JavaScript API in Google Cloud Platform
How to avoid: Go to APIs & Services → Library in GCP and enable both Maps JavaScript API and Places API
Why it's a problem: Using a geographic address field that contains incomplete addresses
How to avoid: Use the Search Box element with geographic places enabled when collecting addresses to ensure they are properly formatted
Why it's a problem: Not restricting the Google Maps API key to your domain
How to avoid: Add HTTP referrer restrictions in GCP Credentials matching your Bubble domain and any custom domains
Best practices
- Always restrict your Google Maps API key to your specific domains
- Use the Search Box element for address inputs to ensure proper geocoding
- Set a reasonable default zoom level — 12 for city overviews, 15 for neighborhoods
- Keep custom marker icons small (32x32px) for fast loading with many markers
- Add pagination or geographic bounds to limit markers when you have thousands of records
- Use conditional marker icons to visually distinguish categories on the map
- Monitor your Google Maps API usage in GCP to avoid unexpected billing
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a restaurant finder in Bubble.io with Google Maps. I need to display restaurant locations as markers on a map, show the restaurant name when clicked, and let users search for restaurants near a specific address. How do I set this up?
Add a Google Map to my listings page. Display all Property records as markers using their address field. Show the property name and price when a marker is clicked. Add a search box that re-centers the map when users search for an address.
Frequently asked questions
Is the Google Maps API free to use?
Google provides $200 of free Maps API usage per month, which covers approximately 28,500 map loads. Beyond that, pricing starts at $7 per 1,000 loads. Most small to medium Bubble apps stay within the free tier.
Can I use OpenStreetMap instead of Google Maps in Bubble?
Yes. There are Bubble plugins for OpenStreetMap and Leaflet.js that provide free map tiles without a Google API key. They lack some Google-specific features like Street View.
Why are my markers not showing on the map?
The most common causes are: geographic address field is empty or poorly formatted, Privacy Rules blocking access to the data, or the search returns no results. Check your data and Privacy Rules first.
Can I draw routes or directions on the Bubble map?
The built-in Map element does not support directions. You would need a plugin like the Google Maps Extended plugin or use the Directions API via the API Connector.
Can RapidDev help build a location-based app with maps in Bubble?
Yes. RapidDev can build complete location-based applications with custom maps, geofencing, real-time tracking, and proximity-based search features in Bubble.
How do I handle the map on mobile devices?
The Map element is responsive by default. Set it to 100% width and a fixed height (300-400px on mobile). Use breakpoint conditions to adjust the map size on smaller screens.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation