Maps and geolocation features in Bubble rely on Google APIs. Once your app uses your own domain, it will require your own Google API keys in the Settings > General > "General services API Keys" section. This guide covers how to obtain your own keys.
You first need to set up your account in the Google Developers Console - this tells Google about your app and is how Google will know which APIs your app is allowed to invoke.
Visit the console here. You will have to log in; you may also have to provide billing details, which is a requirement from Google.
First, create a "project" in Google that corresponds to your Bubble app; your interface may look something like this:
Then, with that project active (i.e. name showing in the topbar), click on the menu icon in the upper left > APIs & Services > Library:
In the Library, search for the following APIs and "Enable" each one:
- Geocoding API
- Places API
- Geolocation API
Now visit the menu icon in the upper left > APIs & Services > Credentials. Create 2 new API keys (in the "Create credentials" button), and edit one of them to be called "Client" and the other to be called "Server".
We now want to apply some restrictions to the keys as a form of security.
Click into the Client key's settings, and under "Application restrictions", choose "HTTP referrers (web sites)". Then under the "Website restrictions" section, add your Bubble app's URL, for instance like "https://appname.bubbleapps.io/*". This restriction means that only your Bubble app can use the Client key. The "*" is a "wildcard" which means that any URL starting with "https://appname.bubbleapps.io/" will be accepted.
Then, click into the Server key's settings, and look at the "API restrictions" section. Choose "Restrict key", and then in the dropdown, select all 4 of the APIs you enabled above. This restriction means that the Server key can only use these 4 Google APIs.
The keys are now all set to be used! In a different tab, go back to your Bubble editor and go to Settings > General. In the "General services API keys" section, copy and paste the Server key into the "Google Geocode API key" box, and the Client key into the "Google Map API key" box. You should now be all set up.
- The generic instructions provided by Google for setting up an API key are here for Maps and here for Geocode; the instructions on this Manual page are accurate as of January 2020, but as Google updates their interface, please refer to their official documentation as needed
- In order to use these APIs, you may need to set up a billing account with Google Cloud and connect your Google project with that billing account
- Note that changes in a Google project configuration can take a minute or so to propagate and take effect