Restricting a Google Maps API key

11 months ago

Restricting a Google Maps API key

I often see developers not understanding the importance of managing their Google Maps API key properly.

Think of it as a password. You wouldn't want to be throwing your password around to anybody, would you?

Essentially, an API key is a password - but it's even more powerful! You don't need an user name or e-mail to identify yourself with an API key, you only need the key.

This is why it's good practice to always keep your key private. It should be straight-forward, right? Unfortunately it can be a bit confusing for newer developers because the context matters!

If you're using the JavaScript API, Android SDK, iOS SDK, or the Embed API: then you must create a public API key and if you don't restrict it properly, you can end up with a massive bill from Google...

Yikes! This person got a €10,000 bill! Source:

With that said, you should always restrict your API keys properly, whether it's public or not.

The Google Maps documentation has great coverage on restricting keys but the Google Cloud console can be a bit frightening to use, so I will do my best to guide you through the most common case uses!

API restrictions

Google provides two restriction methods: application restrictions and API restrictions, which is restricting each of your API key to specific APIs.

You should only enable the APIs that your API key is meant to use, otherwise, if a malicious user gets ahold of your key and your application restriction isn't enough to hold them off, they can start abusing a lot more APIs on your behalf.

JavaScript & Embed API Android SDK iOS SDK

This is how a call to the JavaScript API looks like, and as you can see, here - the API key is intended to be public. There's no point trying to hide it at all, because it will be public no matter what.

This also applies to wrappers for e.g. React, they all use the same thing in the background - embed the Google Maps JavaScript API with the API key visible.

Furthermore, this also includes the Embed API, which does the same thing:

External sources are always visible on the client.

Remember, it's technically the user making the request, not you!

Application restrictions

Google provides a good API security best practices article, I recommend you give it a good read.

Following their recommendation, you should restrict your key for the JavaScript API (including Direction Services, Distance Matrix Service, Elevation Service, Geocoding Service, and Places Library when used in the JavaScript API) through a HTTP referer restriction.

This means that you restrict usage of your API key to a specific list of accepted domains. For example, if I had embedded a map on this page, I would've used as the referer restriction.

This section is under maintenance.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus consequat, nisl ac ornare gravida, augue arcu interdum ligula, eget accumsan leo quam a sapien. Curabitur vehicula congue libero, sit amet aliquet eros sagittis a.

This section is under maintenance.

Nec sollicitudin sem rhoncus quis. Curabitur sed blandit ex, sit amet convallis dui. Aliquam pretium suscipit erat eget malesuada. Sed vitae pretium odio, non varius lorem. Maecenas feugiat ligula urna, in fringilla diam molestie nec. Morbi ut tincidunt erat.