javascript - Do I need to hide API key when using google maps js API? If so, how?

Question

According to https://developers.google.com/maps/documentation/javascript/tutorial#HTML5 , it seems I can add the following tag to my html and start using maps js API.

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

But this will reveal my API key.

After searching on google and browsing answers on stackoverflow, I feel that maybe there is no need to hide this API key. I just need to set the referer when I create the API key on google, as explained in https://stackoverflow.com/a/2256312/1316649

So, even others know my API key, they cannot use it from another domain. Am I right?

But google says you shouldn't embed API key in code: https://support.google.com/cloud/answer/6310037

So, do I need to hide API key when using google maps js API? If so, how?

Update: By 'API key', I meant browser API key.

Answer 1

You can create multiple API keys with different restrictions to use them safely. For embedding a map, the Google Maps documentation has instructions for creating a correctly restricted API key so that it cannot be abused for other purposes at Get an API Key - Restricting API keys. It's OK to include a restricted API key in your source code, because you cannot embed a map properly without doing that anyway.

If you need server-side API access, you can create a second API key with less restrictions. That one should be kept secret.