How to Setup Google Maps API Keys in Bubble.io (Complete Guide)
13th of January, 2022
In this guide, you’ll learn the step-by-step instructions to configure your own Google Maps API keys within Bubble. This is essential for anyone building an application that displays a map, or even pulls data from a geographic address.
The steps to setting up Google Maps API keys in Bubble include:
1. Creating a Google developer account
Whenever you build an application in Bubble, one of the first things you might notice is that you’ll have two errors displayed in the top right-hand corner. These errors indicate that you need to source your own Google Maps API keys in order to make your app functional.
If you were to select each error, it would redirect you to your settings tab. On this page, you’ll then see two empty fields that prompt you to add your own API keys.
In order to source these API keys, you’ll first need to create an account within the Google developer console.
Within the developer console, the first thing you’ll need to do is create a new project. For the sake of our tutorial today, I’ll be calling this the ‘Test Project’.
Once a project has been created, you can now source the necessary API keys to power your application.
2. Generating API keys
Inside your new project, you’ll see a menu called ‘credentials’. If you select this, it’ll then redirect you to a page for your API keys. Now, at this point, we haven’t yet generated our own API keys, so this page will be blank.
In the top right-hand corner, you’ll see a button to generate a new API key. At this point in time, you should click this button twice and create not one, but two brand new keys.
Once you’ve created your API keys from scratch, we’ll now need to configure the settings that create the connection between your Bubble app.
The first setting we’ll need to update is the name of each key. You’ll need to update one key to be called ‘Client’, then the other to be called ‘Server’.
While you’re editing the names of each key, you’ll also see an option to add a security restriction for API requests, This restriction just determines what URLs can request location data from your Google developer account.
In my example today, I’ll select to add a ‘HTTP referers’ restriction. I’ll then need to paste in the URL from my Bubble app that I’d like to restrict my API to.
If I was to run a preview of my Bubble app, I could copy the URL from any page. When I then paste this URL into my developer portal, I’ll remove any URL paths and parameters. This means that I should be left with nothing but my root domain.
At the end of my root domain, I could then choose to add an asterisk (*). By adding the asterisk, it verifies any page within my application. This means that my API keys will now respond to requests from all pages.
Once I save the settings for my first API key, I’ll then need to open my second API key and make the exact same changes.
This means that I’ll need to create the same ‘HTTP referers’ restrictions and paste in the same domain that I’d originally approved.
3. Enabling all Maps API services
Once we’ve successfully generated our two API keys, the last thing we’ll need to do is actually enable the specific API services we’d like to access through our app. These services will determine what data we can request and display from Google.
Thankfully, the process of enabling each service is relatively straightforward. If you open your developer console, you’ll see a search bar at the top of the page. Within this search bar, you’ll simply need to type in the name of each service, select the relevant option, then choose to enable the service.
The individual services we’ll need to enable today include:
- Geocoding API
- Places API
- Geolocation API
- Maps JavaScript API
- Time Zone API
Once you’ve enabled each of these services, you can now copy your API keys over to your Bubble application.
Simply start by copying the ‘Client’ AP key into your ‘Google Map API key’ field. Once this is complete, you can then copy your ‘Server’ API key into the ‘Google Geocode API key’ field.
And just like that, your Bubble application now has the ability to request and receive location-based data from your Google developer console.
If for some reason, you find that your maps experience is not working in Bubble, it’s important to review the billing method of your Google developer account. In order for all of the API services to function, you’ll be required to have a valid payment method on your account.
While Google is quite generous about how many free API requests you can send, having a billing method on file is still a mandatory requirement for using the service,
And just like that, that’s exactly how you can configure your own Google Maps API keys within Bubble. As you can see, there were a few minor nuances throughout the process, but there wasn’t anything we couldn’t handle within Bubble.