简介
本教程介绍了如何使用 HTML 将带有标记的 Google地图添加到网页中。以下便是您将在本教程的指导下创建的地图。两个标记分别位于加利福尼亚州的山景城和华盛顿州的西雅图。
开始操作
以下是使用 HTML 创建带有标记的 Google 地图的步骤:
- 获取 API 密钥
- 创建 HTML、CSS 和 JS 网页
- 添加地图
- 添加标记
您需要一个网络浏览器。
请根据所用平台从受支持的浏览器列表中选择一个常见的浏览器,例如 Google Chrome(推荐)、Firefox、Safari 或 Edge。
第 1 步:获取 API 密钥
本部分介绍如何使用您的 API 密钥对应用进行身份验证,以便使用 Maps JavaScript API。
请按照下列步骤获取 API 密钥:
- 前往 Google Cloud 控制台。
- 创建或选择一个项目。
- 点击继续,启用 API 和任何相关服务。
- 在凭据页面上,获取 API 密钥(并设置 API 密钥限制)。注意:如果您已有不受限的 API 密钥或存在浏览器限制的密钥,可以使用相应密钥。
- 如需防止配额盗用并保护 API 密钥,请参阅使用 API 密钥。
- 启用结算功能。如需了解详情,请参阅用量和结算。
- 获得 API 密钥后,点击“YOUR_API_KEY”将密钥添加到以下代码段中。复制并粘贴引导程序脚本标记,以便在自己的网页上使用。
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>
第 2 步:创建 HTML、CSS 和 JS 网页
下方代码可创建一个基本的 HTML 网页:
<html>
<head>
<title>Add a Map with Markers using HTML</title>
<!-- TODO: Add bootstrap script tag. -->
</head>
<body>
<!-- TODO: Add a map with markers. -->
</body>
</html>
若要加载地图,您必须添加一个包含 Maps JavaScript API 引导加载程序的 script 标记,如以下代码段所示(添加您自己的 API 密钥):
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">
第 3 步:添加地图
若要将 Google 地图添加到网页中,请复制 HTML 元素 gmp-map 并将其粘贴到 HTML 网页的 body 中:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
第 4 步:添加标记
若要向地图添加标记,请使用 HTML 元素 gmp-advanced-marker。复制以下代码段,然后粘贴您在上一步中添加的整个 gmp-map。
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
以上代码会添加两个标记,并更改 gmp-map 上的 zoom 和 center 参数,以便更好地显示这些标记。使用高级标记需要地图 ID(可以使用 DEMO_MAP_ID)。
提示和问题排查
- 您可以使用自定义样式来自定义地图。
- 在网络浏览器中使用开发者工具控制台来测试和运行代码、阅读错误报告并解决代码存在的问题。
- 使用以下键盘快捷键在 Chrome 中打开控制台:
- Command+Option+J(在 Mac 上)或 Ctrl+Shift+J(在 Windows 上)。
- 按照以下步骤操作,获取 Google 地图上某个位置的纬度和经度坐标。
- 在浏览器中打开 Google 地图。
- 在地图上右键点击需要坐标的确切位置。
- 从显示的上下文菜单中选择这儿有什么?。地图会在屏幕底部显示一张卡片。在卡片的最后一行找到纬度和经度坐标。
- 您可以使用地理编码服务将地址转换为纬度和经度坐标。开发者指南详细介绍了如何开始使用地理编码服务。
完整示例代码
以及本教程使用的完整示例代码。
<html>
<head>
<title>Add a Map with Markers using HTML</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>