所以我在我正在做的第一个项目中使用谷歌地图API ...所以是的我是新的，我很抱歉，如果这是基本的或明显的，但我没有找到一个明确的答案或方向。以下是我在Google上发现的有关安全使用API密钥的文档。
安全使用API密钥的最佳做法
在应用程序中使用API密钥时，请注意保护它们的安全。公开泄露您的凭据可能会导致您的帐户遭到入侵，这可能会导致您的帐户产生意外费用。要确保API密钥安全，请遵循以下最佳做法：
不要直接在代码中嵌入API密钥：嵌入代码中的API密钥可能会意外地暴露给公众 - 例如，如果您忘记从共享的代码中删除密钥。您可以将它们存储在环境变量或应用程序源树之外的文件中，而不是将API密钥嵌入应用程序中。不要将API密钥存储在应用程序源代码树中的文件中：如果将API密钥存储在文件中，请将文件保留在应用程序的源代码树之外，以帮助确保密钥不会在源代码控制系统中结束。如果您使用公共源代码管理系统（如GitHub），这一点尤为重要。限制您的API密钥仅由IP地址，引荐来源网址和需要它们的移动应用程序使用：通过限制可以使用每个密钥的IP地址，引荐来源网址和移动应用程序，您可以减少受损API的影响键。您可以通过打开“凭据”页面指定可以使用控制台中每个键的主机和应用程序，然后使用所需的设置创建新的API密钥，或者编辑API密钥的设置。删除不需要的API密钥：为了最大限度地减少您的攻击风险，请删除不再需要的任何API密钥。定期重新生成API密钥：您可以通过单击每个密钥的“重新生成密钥”从“Cloud Platform控制台凭据”页面重新生成API密钥。然后，更新您的应用程序以使用新生成的密钥。生成替换密钥后，旧密钥将继续工作24小时。在公开发布之前检查您的代码：在公开代码之前，请确保您的代码不包含API密钥或任何其他私人信息。
现在我的问题是我无法弄清楚如何在我的网站上加入谷歌地图而不直接把它放在代码中。现在我的API在我的index.html中是这样的：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
但这又是我的代码直接在世界上看到我认为是错误的方式。
对于Google Maps Javascript API v3，密钥必须在您的页面上公开。适用文本是：
限制您的API密钥仅供IP地址，引荐来源网址和需要它们的移动应用使用
转到Google API控制台并生成密钥，将其限制为您拥有（或想要放置地图）的网址，以防止配额“被盗”。
您引用的API key best practices article仅提供使用API密钥的一般准则，并且对于某些面向最终用户的API（例如Google Maps JavaScript API），您无法避免将API密钥暴露给最终用户。
因此，在公共Maps JavaScript API应用中，强烈建议为生产系统中使用的任何密钥添加引荐来源限制，尤其是面向公众的密钥，并且仅授权应用的域，主机甚至完整文件URL。
在Google API Console中创建密钥并选择Maps JavaScript API的设置凭据时，向导将指导您如何保护密钥，并提示您输入要授权的URL。