By Devcipator | No-Code and Low-Code Development Agency
If you have ever tried to add maps, address search, or location features to your Bubble.io app and things just did not work, you are not alone. Google Maps and Geocoding API setup is one of the most common pain points we see developers run into when building on Bubble.io.
The map does not load. The Searchbox autocomplete does not return results. Geocoding fails silently. In almost every case, the root cause is the same: incorrect API key configuration.
At Devcipator, we build location-based apps for clients regularly. We put together this complete step-by-step guide to walk you through the entire setup process the right way, from creating your Google Cloud project all the way to testing everything inside your Bubble.io app.
We also filmed a full video tutorial covering every step in detail. Watch it here: [paste your YouTube link]
Why Getting the API Setup Right Matters
Google Maps functionality in Bubble.io depends on multiple APIs working together correctly. If even one API is missing, misconfigured, or using the wrong key type, your entire location feature can break without a clear error message.
Beyond functionality, proper API key restrictions also protect you from unauthorized usage and unexpected billing charges. Setting up your keys correctly from the start saves you both time and money.
What You Will Need Before Starting
Before diving in, make sure you have the following ready:
A Google account with access to Google Cloud Console A Bubble.io account with an active app A billing method added to your Google Cloud project (required to use Google Maps APIs)
Step 1: Setting Up Your Google Cloud Project
Go to console.cloud.google.com and sign in with your Google account.
Click on the project selector at the top and choose “New Project.” Give your project a clear name, something like “MyApp Maps” so you can find it easily later.
Once the project is created, you need to enable billing. Google requires a billing account to be linked before you can use any of the Maps APIs. You will not be charged unless you exceed the free monthly usage limit, which is generous for most apps.
Step 2: Enabling the Required APIs
With your project selected, go to “APIs and Services” and then “Library.” You need to enable the following five APIs:
Maps JavaScript API – This powers the visual map display inside your Bubble.io app.
Places API – This enables the address autocomplete and place search functionality used by Bubble’s Searchbox element.
Geocoding API – This converts addresses into geographic coordinates and vice versa.
Geolocation API – This allows your app to detect a user’s current location.
Time Zone API – This is required for certain location-based workflows involving time data.
Search for each one individually and click Enable. Do not skip any of them, as missing even one can cause specific features to stop working.
Step 3: Creating Your API Keys
In Bubble.io, you need two separate API keys: one for the frontend (client-side) and one for the backend (server-side). Using the same key for both is a common mistake that causes issues with restrictions and security.
Go to “APIs and Services” and then “Credentials.” Click “Create Credentials” and select “API Key.” Create one key and label it clearly as your frontend key, for example “Bubble Frontend Key.” Create a second key and label it as your backend key, for example “Bubble Backend Key.”
Step 4: Applying API Key Restrictions
This step is critical for both security and functionality. Unrestricted keys can be misused and can also cause unexpected behavior inside Bubble.
For your frontend key: Under “Application restrictions,” select “HTTP referrers.” Add your Bubble app URL, for example yourdomain.com and also add the wildcard version yourdomain.com/*. If you are still in development, also add your Bubble editor URL.
Under “API restrictions,” select “Restrict key” and choose only the APIs your frontend needs: Maps JavaScript API and Places API.
For your backend key: Under “Application restrictions,” select “IP addresses” if you know your server IP, or leave it unrestricted if you are unsure. Under “API restrictions,” restrict it to Geocoding API, Geolocation API, and Time Zone API.
Save both keys after applying restrictions.
Step 5: Adding API Keys to Bubble.io
Open your Bubble.io app and go to Settings, then General. Scroll down to the Google API keys section. You will see two fields:
Google Maps API Key – Paste your frontend key here. This is used for map display and the Searchbox element.
Google Geocoding API Key – Paste your backend key here. This is used for server-side location processing and geocoding workflows.
Click Save after adding both keys.
Step 6: Setting Up the Searchbox Element
The Searchbox element is Bubble’s built-in address autocomplete input. To make it work correctly with your new API keys, add a Searchbox element to your page and open its properties.
Set the type to “Geographic addresses” to enable address autocomplete powered by the Places API. You can also restrict results to a specific country or region if your app only serves a particular area.
Connect the Searchbox output to your map element or workflow as needed. The Searchbox will return a geographic address object that you can use to populate a map, save to the database, or process in a workflow.
Step 7: Testing and Validating Your Setup
Before going live, test every part of your location setup:
Load a page with your map element and confirm the map renders correctly without any API errors in the browser console.
Type an address into your Searchbox and confirm autocomplete suggestions appear. If they do not, check that your frontend key has the Places API enabled and that your HTTP referrer restrictions are configured correctly.
Run a workflow that uses geocoding and confirm it returns the expected coordinates. If it fails, check your backend key and confirm the Geocoding API is enabled and unrestricted at the IP level.
Common Mistakes to Avoid
Using one API key for both frontend and backend causes restriction conflicts. Always use separate keys.
Forgetting to enable billing on your Google Cloud project will prevent all APIs from working.
Setting HTTP referrer restrictions too strictly, such as not including the wildcard path, can block legitimate requests from your app.
Not enabling all five required APIs will cause certain features to silently fail without a clear error message.
Watch the Full Video Tutorial
Everything covered in this guide is demonstrated step by step in our latest YouTube video:
Complete Guide: Setting Up Google Maps and Geocoding API Keys in Bubble.io (Searchbox + Location)
Watch it here: https://youtu.be/5NjMe6GDuPQ