Working with location data
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.
Note: In May 2020, Google changed its APIs to split off timezone capabilities (previously part of a bundle of Geocode capabilities) into its own API. This means you will have to add the Time Zone API to the capabilities of your app when registering it with Google.
Set up your app in Google Developers Console
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
Maps JavaScript API
(New in May 2020) Time Zone API
Create and set up your new keys
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. If you're using a custom domain, you should add https://yourdomain.com/* as a website restriction for the Client Key. If the domain connected to your app is a subdomain, then you should add https://*.http://yourdomain.com/*|yourdomain.com/*
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 5 of the APIs you enabled above. This restriction means that the Server key can only use these 5 Google APIs. (New in May 2020 - Note that now you must enable all 5 of the APIs, whereas before there were only 4 to enable.)
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.
Further notes on the Google side
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
Watch out
Because Bubble uses the Google Maps API, there are some inconsistencies in Google Maps data that will reflect in the app. For example, for some (non-US) addresses, the "city' field is actually the name of the neighborhood / area. To help mitigate this, try adding a Map element (even a hidden one) that takes as its value the value from a SearchBox input - the Map will place the pin correctly, and then its "center" might yield more accurate data about that location.
Other ways to learn
Last updated
Was this helpful?
