Google Maps API Key - Does it need hidden?

"Hide and protect your Maps API key!" so says Google here.

Seems easy. But if you are reading this, you realized Google doesn't explain it well of what needs hidden and/or protected.

Below is what you need to know:

Assumption:

You followed this useful tutorial on GitHub to hide your key with a .gitignore so git ignores it
Realized step 6 doesn't work for Google Maps as the API key is visible upon Inspect Source.

Do You Have a Client-Side Maps API Key?

If you have the option to connect to a Google Maps API with the following:

<script defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

then you have a client-side API key which is meant to be visible!

So says a deep dive into StackOverflow threads and even Google (if you read between the lines, see below bullets) says so here.

Maps JavaScript API .....Best Practices

Restrict your API keys * Independent API key per app
Delete API keys no longer needed
Exercise caution when regenerating keys
Monitor API key usage for anomalies

Maps Static API .....Best Practices

Restrict your API keys
Digital signatures
Independent API key per app
Delete API keys no longer needed
Exercise caution when regenerating keys
Monitor API key usage for anomalies
Do not embed signing secret directly in code
Do not store signing secret in source tree
Review code before public release

Yup, that simple. You generally don't need to hide the API key unless you are working with the above bold items in the Best Practice List.

But, you should protect and restrict it via Google's suggested restrictions to limit (but not stop) bad apples from hijacking your client-side/browser API key and running up the bills or usage requirement.