Setting up Google API keys

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.

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

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.

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 tap 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.

results matching ""

    No results matching ""