在网页上使用 Google Maps API V3 显示多个地图-JavaScript中文网-JavaScript教程资源分享门户

在一个网页中显示多个谷歌地图是一项常见的任务，尤其对于需要展示多个位置（如店铺分布、景点介绍等）的网站而言。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 库的引用。可以通过以下代码添加：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

将其中的 YOUR_API_KEY 替换为你的 API Key。

步骤 3：创建地图容器

我们需要创建一个 HTML 元素来充当地图的容器。可以使用 <div> 元素来创建容器：

<div id="map1" style="height: 400px;"></div>

这个代码片段创建了一个 ID 为 map1 的 <div> 元素，并设置了其高度为 400 像素。

步骤 4：初始化地图

我们需要在 JavaScript 中初始化地图，并将其绑定到前面创建的 <div> 元素上。以下是一个示例代码：

function initMap() {
  var options = {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 10,
  };
  var map = new google.maps.Map(document.getElementById("map1"), options);
}

这个代码片段定义了一个 initMap() 函数，其中 options 对象指定了地图的初始中心点 center 和缩放级别 zoom。然后，使用 new google.maps.Map() 方法创建一个新的地图实例，并将其绑定到 ID 为 map1 的 <div> 元素上。

步骤 5：显示多个地图

现在我们已经有了单个地图的基本结构和初始化代码，接下来是如何在同一页上显示多个地图。

首先，我们需要为每个地图创建一个独立的容器。我们可以使用不同的 ID 来为每个地图容器命名，例如：

<div id="map1" style="height: 400px;"></div>
<div id="map2" style="height: 400px;"></div>

接下来，我们需要为每个地图初始化一个独立的实例。可以使用不同的参数来配置每个地图的中心点和缩放级别，例如：

-- -------------------- ---- -------
-------- ---------- -
  --- ------- - -
    ------- - ---- -------- ---- --------- --
    ----- ---
  --
  --- --- - --- ------------------------------------------------ ---------
-

-------- ---------- -
  --- ------- - -
    ------- - ---- -------- ---- -------- --
    ----- ---
  --
  --- --- - --- ------------------------------------------------ ---------
-

这个代码片段定义了两个不同的初始化函数 initMap1() 和 initMap2()，分别用于初始化 ID 为 map1 和 map2 的容器。它们使用不同的

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25626