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.

Tip: The Google API gets used for timezones as well as geographic addresses, so if you're using "Current user's timezone" or addresses anywhere in your app, go ahead and update these 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.

Our Academy tutorial on how to set up Google API keys

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.

Video lesson

• How to set up your Google API key

Further notes on the Google side

• 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

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

Video lesson

• How to set up your Google API key