使用 HTML 添加带有标记的 Google 地图

简介

本教程介绍了如何使用 HTML 将带有标记的 Google地图添加到网页中。以下便是您将在本教程的指导下创建的地图。两个标记分别位于加利福尼亚州的山景城和华盛顿州的西雅图。

开始操作

以下是使用 HTML 创建带有标记的 Google 地图的步骤：

1. 获取 API 密钥
2. 创建 HTML、CSS 和 JS 网页
3. 添加地图
4. 添加标记

您需要一个网络浏览器。

请根据所用平台从受支持的浏览器列表中选择一个常见的浏览器，例如 Google Chrome（推荐）、Firefox、Safari 或 Edge。

第 1 步：获取 API 密钥

本部分介绍如何使用您的 API 密钥对应用进行身份验证，以便使用 Maps JavaScript API。

请按照下列步骤获取 API 密钥：

1. 前往 Google Cloud 控制台。
2. 创建或选择一个项目。
3. 点击继续，启用 API 和任何相关服务。
4. 在凭据页面上，获取 API 密钥（并设置 API 密钥限制）。注意：如果您已有不受限的 API 密钥或存在浏览器限制的密钥，可以使用相应密钥。
5. 如需防止配额盗用并保护 API 密钥，请参阅使用 API 密钥。
6. 启用结算功能。如需了解详情，请参阅用量和结算。
7. 获得 API 密钥后，点击“YOUR_API_KEY”将密钥添加到以下代码段中。复制并粘贴引导程序脚本标记，以便在自己的网页上使用。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&a