Maps Embed API 快速入门

通过简单的 HTTP 请求在您的网页上放置交互式地图或街景全景图,无需使用 JavaScript。

费用

所有 Maps Embed API 请求都是免费的, 用量不受限制但是,所有请求仍然需要有效的 Google Cloud API 密钥。如需了解详情,请参阅用量和结算

准备工作

如需在网页上创建嵌入式地图,请依次点击以下标签页,完成所需的设置步骤:

第 1 步

控制台

  1. 在 Google Cloud 控制台中,打开项目选择器页面,点击创建项目以开始创建新的 Cloud 项目。

    前往项目选择器页面

  2. 确保您的 Cloud 项目已启用结算功能。确认您的项目已启用结算功能

    Google Cloud 提供免费试用。试用期将在 90 天后或者账号费用累积达到 300 美元时(以先到者为准)结束。您随时可以取消试用。Google Maps Platform 每月定期提供 200 美元的赠金。如需了解详情,请参阅结算账号赠金结算

Cloud SDK

gcloud projects create "PROJECT"

您可以详细了解 Google Cloud SDKCloud SDK 安装和以下命令:

第 2 步

如要使用 Google Maps Platform,您必须启用计划用于项目的 API 或 SDK。

控制台

启用 Maps Embed API

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

您可以详细了解 Google Cloud SDKCloud SDK 安装和以下命令:

第 3 步

此步骤仅包含 API 密钥的创建流程。如要在生产环境中使用 API 密钥,强烈建议您为相应密钥设置限制。如需了解详情,请参阅相应产品的使用 API 密钥页面。

API 密钥是唯一标识符,用于对与您的项目相关联的请求进行身份验证,以便计算用量和执行结算。您必须至少有一个与您项目相关联的 API 密钥。

如需创建 API 密钥,请执行以下操作:

控制台

  1. 前往 Google Maps Platform > 凭据页面。

    前往“凭据”页面

  2. 凭据页面上,依次点击创建凭据 > API 密钥
    已创建的 API 密钥对话框会显示您新创建的 API 密钥。
  3. 点击关闭
    新的 API 密钥即会列在凭据页面的 API 密钥下。
    (在生产环境中使用 API 密钥之前,请务必对 API 密钥设置限制。)

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

详细了解 Google Cloud SDKCloud SDK 安装和以下命令:

生成 iframe

点击以下选项,然后添加位置和 API 密钥以生成 为网页添加 iframe如需了解其他参数和选项,请参阅嵌入地图

测试您的 iframe

如需在 HTML 浏览器窗口中查看 iframe,请执行以下操作:

  1. 打开默认的文本编辑器。你应该有如下文本编辑器: TextEditMicrosoft Windows 记事本 默认安装在您的设备上。
  2. 创建一个 HTML 文件,并将其命名为 index.html
  3. 使用上面生成的 iframe 添加以下代码:

    <html>
      <!-- Replace this code comment with your iframe. -->
    </html>
    
  4. 保存 index.html HTML 文件。

  5. 将该 HTML 文件从桌面拖放到网络浏览器上进行加载;在大多数操作系统上,也可双击该文件进行加载。

恭喜!您刚刚使用 Maps Embed API 设置并构建了一个地图。

清理

您可以删除 Google Cloud 项目,以停止对该项目中使用的所有资源计费。

  1. 在 Google Cloud 控制台中,前往管理资源页面:

    转到“管理资源”页面

  2. 如果您打算删除的项目已附加到某个组织,请选择并展开页面顶部的组织列表。
  3. 在项目列表中,选择要删除的项目,然后点击 删除
  4. 在对话框中输入项目 ID,然后点击关停以删除项目。

后续步骤