如何安全地使用 GoogleAPI 密钥

所以我在我的第一个项目中使用了谷歌地图 API... ... 所以是的，我是新手，如果这是基本的或显而易见的，我很抱歉，但我还没有找到一个明确的答案或方向。下面是我从 Google 上找到的关于安全使用 API Key 的文档。

安全使用 API 密钥的最佳实践

在应用程序中使用 API 密钥时，要注意保证它们的安全。公开暴露您的凭据可能导致您的帐户被泄露，这可能导致您的帐户意外的费用。为了保证 API 密钥的安全性，请遵循以下最佳实践:

不要直接在代码中嵌入 API 键: 嵌入在代码中的 API 键可能会意外地暴露给公众ーー例如，如果您忘记从共享的代码中删除这些键。与其将 API 密钥嵌入到应用程序中，不如将它们存储在环境变量或应用程序源代码树之外的文件中。 不要将 API 密钥存储在应用程序源代码树中的文件中: 如果您将 API 密钥存储在文件中，请将这些文件保存在应用程序源代码树之外，以帮助确保您的密钥不会最终出现在源代码控制系统中。如果使用诸如 GitHub 之类的公共源代码管理系统，这一点尤其重要。 限制你的 API 密钥只能被需要它们的 IP 地址、引用 URL 和移动应用程序使用: 通过限制可以使用每个密钥的 IP 地址、引用 URL 和移动应用程序，你可以减少受损的 API 密钥的影响。通过打开“凭据”页面，然后使用所需的设置创建新的 API 密钥，或者编辑 API 密钥的设置，可以指定可以使用控制台中的每个密钥的主机和应用程序。 删除不需要的 API 键: 为了尽量减少受到攻击的风险，删除任何不再需要的 API 键。 定期重新生成您的 API 密钥: 您可以通过单击每个密钥的重新生成密钥来从 Cloud Platform Console 凭据页重新生成 API 密钥。然后，更新应用程序以使用新生成的密钥。生成替换密钥后，旧密钥将继续工作24小时。 在公开发布代码之前检查代码: 在公开发布代码之前，确保代码不包含 API 密钥或任何其他私有信息。

现在我的问题是，如果不直接把谷歌地图放到代码中，我就不知道如何把它合并到我的网站上。现在我的 API 在 index.html 中，如下所示:

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

但同样，这是直接在我的代码，让世界看到，我认为是错误的方式。