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