将 Google 地图添加到网页中

您可以使用 HTML、CSS 和 JavaScript 代码将 Google 地图添加到网页中。本页面介绍了如何向网页添加地图，然后以编程方式访问地图实例。

概览

要加载地图，网页必须完成以下操作：

使用引导加载程序加载 Maps JavaScript API。此过程中会传递 API 密钥，可将密钥添加到 HTML 或 JavaScript 源文件中。
将地图添加到 HTML 页面中，并添加需要的 CSS 样式。
加载 maps 库并初始化地图。

使用 `gmp-map` 元素添加地图

gmp-map 元素是向网页添加 Google 地图的首选方式。它是一种使用 Web 组件创建的自定义 HTML 元素。若要使用 gmp-map 元素将地图添加到网页中，请按以下步骤操作。

将包含引导加载程序的 script 元素添加到 HTML 页面，或者将其添加到 JavaScript 或 TypeScript 源文件（不含 script 元素）。使用您的 API 密钥和其他任意选项配置引导加载程序。您可以选择动态库导入或直接脚本加载。此示例展示了如何将直接脚本加载引导加载程序添加到 HTML 页面：
```
<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>
```
详细了解如何加载 Google Maps JavaScript API
在 HTML 页面上添加 gmp-map 元素。为 center（必需）指定纬度和经度坐标，为 zoom（必需）指定缩