在网页中嵌入地图

嵌入地图

Maps Embed API 可以在网页中嵌入地图，且无需使用 JavaScript。根据不同的使用场景，可以集成多种地图模式。本课程将涵盖开始在应用中嵌入地图所需的所有内容。

借助 Maps Embed API，可以通过 HTTP 请求将交互式地图放置在网页上。因此，Maps Embed API 的 URL 可直接作为任意 iframe 的 src 属性。

创建 URL

要使用 Maps Embed API 在不依赖 JavaScript 的情况下加载地图，需要指定一个 URL。示例如下：

1https://www.google.com/maps/embed/v1/MAP_MODE?PARAMETERS&key=API_KEY

该 URL 中需要进行以下修改：

• 将 MAP_MODE 替换为要显示的地图模式。
• 将 PARAMETERS 替换为所选地图模式所需的参数（包括必填和可选参数）。
• 将 API_KEY 替换为在设置凭证时生成的 API 密钥。

地图模式

可在 Maps Embed API 请求 URL 中选择以下任一种地图模式：

• place 模式：聚焦并显示地图上的某个特定地点。
• view 模式：显示地图的某一部分，不聚焦于任何具体地点。
• directions 模式：显示地图上两点之间的多条路线。
• streetview 模式：显示地图上某地点的交互式全景图像。
• search 模式：根据搜索查询结果在地图上展示相关位置。

在 iframe 中添加 URL

在网页中使用 Maps Embed API 时，需将 URL 设置为 iframe 的 src 属性值。通过设置 iframe 的 height 和 width 属性来控制地图的尺寸。以下示例中，width 设为 450 像素，height 设为 250 像素。

1<iframe
2	width="450"
3	height="250"
4	frameborder="0" style="border:0"
5	src="https://www.google.com/maps/embed/v1/MAP_MODE?key=API_KEY&PARAMETERS" 
6	allowfullscreen>
7</iframe>

代码示例

下面是一个使用 iframe 加载地图的 HTML 文件示例。

在上述示例中，地图的整个 iframe 定义位于 第 12 至 20 行。以下是代码的详细说明：

• 第 13 行：将 iframe 的 width 设置为 900。
• 第 14 行：将 iframe 的 height 设置为 450。
• 第 15 行：通过设置 frameborder="0" 和 style="border:0"，移除 iframe 默认的边框。
• 第 17 行：使用 allowfullscreen 属性启用全屏模式。
• 第 18 至 19 行：将地图 URL 设置为 iframe 的 src 属性值，以在网页中嵌入地图。同时，使用 place 地图模式展示罗马市。