在一个网页中显示多个谷歌地图是一项常见的任务，尤其对于需要展示多个位置（如店铺分布、景点介绍等）的网站而言。Google Maps API V3 提供了优秀的工具和接口来实现这一目标。本文将介绍如何使用 Google Maps API V3 在网页上显示多个地图。
步骤 1：获取 API Key
首先，我们需要获取 Google Maps API 的开发者密钥，也称为 API Key。API Key 是用于访问 Google Maps API 的身份验证凭据。可以通过以下步骤获取 API Key：
- 登录 Google Cloud Console。
- 选择或创建一个项目。
- 在左侧导航栏中选择“API 和服务”，然后选择“凭据”。
- 点击“创建凭据”按钮，选择“API 密钥”。
- 将生成的 API Key 复制保存下来。
步骤 2：添加 Google Maps JavaScript 库
在 HTML 页面中，我们需要添加 Google Maps JavaScript 库的引用。可以通过以下代码添加：
------- ------------------------------------------------------------------------
将其中的 YOUR_API_KEY 替换为你的 API Key。
步骤 3：创建地图容器
我们需要创建一个 HTML 元素来充当地图的容器。可以使用 <div> 元素来创建容器：
---- --------- -------------- --------------
这个代码片段创建了一个 ID 为 map1 的 <div> 元素，并设置了其高度为 400 像素。
步骤 4：初始化地图
我们需要在 JavaScript 中初始化地图，并将其绑定到前面创建的 <div> 元素上。以下是一个示例代码：
-------- --------- -
--- ------- - -
------- - ---- -------- ---- --------- --
----- ---
--
--- --- - --- ------------------------------------------------ ---------
-这个代码片段定义了一个 initMap() 函数，其中 options 对象指定了地图的初始中心点 center 和缩放级别 zoom。然后，使用 new google.maps.Map() 方法创建一个新的地图实例，并将其绑定到 ID 为 map1 的 <div> 元素上。
步骤 5：显示多个地图
现在我们已经有了单个地图的基本结构和初始化代码，接下来是如何在同一页上显示多个地图。
首先，我们需要为每个地图创建一个独立的容器。我们可以使用不同的 ID 来为每个地图容器命名，例如：
---- --------- -------------- -------------- ---- --------- -------------- --------------
接下来，我们需要为每个地图初始化一个独立的实例。可以使用不同的参数来配置每个地图的中心点和缩放级别，例如：
-------- ---------- -
--- ------- - -
------- - ---- -------- ---- --------- --
----- ---
--
--- --- - --- ------------------------------------------------ ---------
-
-------- ---------- -
--- ------- - -
------- - ---- -------- ---- -------- --
----- ---
--
--- --- - --- ------------------------------------------------ ---------
-这个代码片段定义了两个不同的初始化函数 initMap1() 和 initMap2()，分别用于初始化 ID 为 map1 和 map2 的容器。它们使用不同的
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25626