π Obtaining Your Maps API Key(s)
The Maps Platform runs on the Google Cloud Platform (GCP).
Roughly speaking, GCP is Google's answer to Amazon's AWS and Microsoft's Azure. But in terms of geospatial tooling, nothing comes close to Google's extensive offering.
Now, even if you only intend to use GCP's map-related features, you'll still need:
- a GCP account
- a GCP billing account
- a GCP project
- and a GCP Maps Key.
That's a bunch of new terms so let's visualize a typical, moderately complex scenario which will help us understand the moving parts.
I have a web application consisting of a frontend and a backend. I need two separate API keys β one to display a map on the frontend and another to run geospatial workloads from the backend.
From GCP's point of view, the hierarchical architecture for the above scenario looks as follows:
β³ (user) account
β³ billing account
β³ project A
β³ Frontend API key
β³ Backend API key
β³ Development/testing key (optional) Each of these keys should have its own restrictions as discussed below .
Also note that the whole project is associated with at most one billing account.
Assuming you already have a google account (e.g. a @gmail.com email or a company email running on Google Workspace):
- Visit console.cloud.google.com
- Click on the "Select a Project" dropdown in the top navbar and then click on "New Project".
- Give your project a name and click "Create".
- Wait for the project to be created. This may take a few minutes.
- If you don't have a billing account, you'll be prompted to create one. FYI, almost every new billing account gets $300 USD of monthly credit towards Maps usage.
- In the Google Cloud Platform console, select your project from the dropdown in the top navigation bar.
- Click on the hamburger menu in the top-left corner and select "APIs & Services" > "Dashboard".
- Click on "Enable APIs and Services".
- Search for "Maps Javascript API" and click on it.
- Click the "Enable" button.
- Click on the "Credentials" tab in the left sidebar.
- Click the "Create Credentials" dropdown and select "API Key".
After that's done, a fresh new API key will have been autogenerated.
As of Nov 2023, you can programmatically create API keys with Google Cloud's CLI (gcloud) .
You can use gcloud locally or as part of your CI/CD pipelines, e.g. in Github Actions .
Once you've got gcloud installed, authenticate and set the corresponding account + project:
gcloud config set account my@email.com
gcloud config set project my-project-name
After that, look into the services api-keys create command. Right now it's only available in beta/alpha but it gets the job done:
gcloud beta services api-keys create \
--display-name="Frontend API key - Prod" \
--allowed-referrers="https://*.example.com/*" \
--api-target=service=places.googleapis.com,service=maps.googleapis.com To retrieve the list of available services (Maps and other GCP APIs) to pass to --api-target, run:
gcloud services list --available --filter="name:googleapis.com"Note: I've originally answered this question on Stack Overflow .
Your project will likely have certain map-related APIs (e.g. the Maps Javascript API) already enabled by default.
After creating your very first key, you may be prompted to restrict it:
Key restriction is a security best practice that limits the API scopes in which the key may be used. Choosing not to restrict your keys may lead to unexpected charges or even key hijacking.
It's recommended to use both the application restrictions (as shown above) and the API restrictions.
We will select API restrictions and HTTP referrers.
Go to the corresponding Console page, open the βCredentialsβ panel and choose a key to edit:
Only select those APIs which you intend to use. If you don't see a particular API in the dropdown, you'll need to enable it through the Library .
This restriction is even more important than the API restrictions. You can input regex -like entries targeting:
- the whole domain ( wildcard )
- selected or all subdomains (wildcard)
- or just specific pages and subpages (prefixed wildcard)
Finally, click βSaveβ on the bottom of the page. Once the changes have propagated across Google's network, only visits from the explicitly allowed (sub)domains will be let through.
You may also need to add your local development URL (e.g. localhost:3000) to the referrer list. Otherwise, your may encounter a β RefererNotAllowedMapError .
Repeat the same process for the backend key and you'll end up with production-ready API keys:
If your frontend API key is properly restricted, you can use it freely in your frontend code. But when it comes to the backend key, you should take appropriate measures to secure it, e.g. using Google's Secret Manager , and never expose it in your frontend code.
Once you have the keys, we're onto π Creating a New Google Map .