Google 地图每天以几十年前无法想象的方式帮助我们导航道路和寻找地点。它不仅在寻路方面很有用，您还可以看到许多用于数据可视化的地图示例，例如最近有多少网站正在使用地图来可视化 COVID-19 在世界范围内的传播。今天，让我们学习如何使用 Google Maps JavaScript API 为我们的网站和应用程序构建自定义地图。
您可能想知道为什么我们可以改用静态地图，或者使用可用的 WordPress 插件之一进行编码，而不是使用 Google Maps JavaScript API 来构建地图。
当然，如果您想在您的网站上显示某些营业地点，两者都是不错的选择。但是，当您想要构建比预构建插件提供的内容更复杂的自定义地图时，Google Maps JavaScript API 可以让您更好地控制时间。
如果你不想花时间在编码方面，并想以更直接的方式在您的网站上显示地图时，我建议使用 Otter 的 Google Maps 块。
获取谷歌地图 JavaScript API 密钥
在我们开始之前，我们首先需要获取谷歌地图的 API 密钥。你可以在这里得到它。 Google Maps API 并非完全免费，但它附带了一个可以满足大多数情况的免费计划。
获取 API 密钥？从环形交叉路口的第三个出口驶出并继续本教程。 ?
创建简单地图
具有默认设置的基本 Google 地图实例。
首先，让我们开始构建一个简单的 Google 地图。虽然您可以将 JavaScript 和 CSS 分开，但在本教程中我们将使用单个 HTML 文件。这是我们将使用的结构：
.wp-block-code {
border: 0;
padding: 0;
}
.wp-block-code>div {
overflow:auto;
}
.hljs{
box-size:border-box;
}
.hljs.shcb-code-table {
display: table;
width: 100%;
}
.hljs.shcb代码table> .shcb-loc {
颜色：继承；
display: table-row;
width: 100%;
.hljs.shcb码表。 shcb-loc> span {
display:table-cell;
}
.wp-block-code code.hljs:not(.shcb-wrap-lines){
空白：预包装；
}
.wp-block-code code.hljs.shcb-wrap-lines {
空白：预包装；
} / p>
.hljs.shcb-line-numbers {
边框间距：0;
计数器重置：行;
}
.hljs.shcb- line-numbers> .shcb-loc {
inverse increment: line;
}
.hljs.shcb-line-numbers .shcb-loc> span {
左padding: 0.75em;
}
.hljs.shcb-line-numbers .shcb-loc::before {
右边框：1px solid #ddd;
内容：计数器（行）；
显示：表格单元格；
内边距：0.75em；
文本对齐：右对齐；
-webkit-用户选择：无；
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
blank:nowrap;
宽度： 1 %;
