如何在单网页中部署两个Google Maps简易门店定位器？

我之前做类似多经销商地图需求时，也踩过Simple Store Locator单实例设计的坑——直接复制代码会导致全局变量冲突、初始化逻辑互相干扰，给你一套亲测有效的修改方案：

1. 准备独立的DOM容器和数据文件 #

首先给两个地图分别创建专属容器，避免DOM选择器冲突：

<!-- 产品1经销商地图容器 -->
<div id="product1-dealers-map" style="height: 450px; width: 100%; margin-bottom: 2rem;"></div>
<!-- 产品2经销商地图容器 -->
<div id="product2-dealers-map" style="height: 450px; width: 100%;"></div>

同时复制原有的stores.json，分别命名为stores-product1.json和stores-product2.json，替换成对应产品的经销商数据。

2. 重构app.js为可复用的实例化函数 #

原app.js是为单地图设计的，核心变量（比如map、infoWindow）都是全局的，直接复用会导致两个地图互相覆盖。我们把它改成可传入参数的初始化函数：

// 封装地图初始化函数，接收容器ID和数据文件路径
function initDealerMap(mapContainerId, storeDataUrl) {
  // 所有变量改为函数内部局部变量，避免全局污染
  let mapInstance;
  let infoWindowInstance;
  let markerList = [];

  // 初始化地图实例
  function initMap() {
    mapInstance = new google.maps.Map(document.getElementById(mapContainerId), {
      // 可根据对应产品经销商分布设置默认中心点和缩放级别
      center: { lat: 31.2304, lng: 121.4737 },
      zoom: 8
    });
    infoWindowInstance = new google.maps.InfoWindow();
    loadDealerData();
  }

  // 加载对应产品的经销商数据
  function loadDealerData() {
    fetch(storeDataUrl)
      .then(response => response.json())
      .then(data => {
        data.stores.forEach(dealer => {
          createDealerMarker(dealer);
        });
      })
      .catch(err => console.error('加载经销商数据失败:', err));
  }

  // 创建经销商标记
  function createDealerMarker(dealer) {
    const markerPosition = new google.maps.LatLng(dealer.lat, dealer.lng);
    const dealerMarker = new google.maps.Marker({
      position: markerPosition,
      map: mapInstance,
      title: dealer.name
    });
    markerList.push(dealerMarker);

    // 标记点击事件
    google.maps.event.addListener(dealerMarker, 'click', () => {
      infoWindowInstance.setContent(`
        <h4>${dealer.name}</h4>
        <p>${dealer.address}</p>
        ${dealer.phone ? `<p>电话: ${dealer.phone}</p>` : ''}
      `);
      infoWindowInstance.open(mapInstance, dealerMarker);
    });
  }

  // 启动当前地图实例的初始化
  initMap();
}

3. 在页面中调用两次初始化函数 #

在加载Google Maps API的脚本中，修改回调函数，分别初始化两个地图：

<!-- 加载Google Maps API，替换成你的API Key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initAllMaps" async defer></script>
<script src="app.js"></script>
<script>
// 统一的初始化入口
function initAllMaps() {
  // 初始化产品1的经销商地图
  initDealerMap('product1-dealers-map', 'stores-product1.json');
  // 初始化产品2的经销商地图
  initDealerMap('product2-dealers-map', 'stores-product2.json');
}
</script>

几个需要注意的细节 #

• 确保你的Google Maps API Key有足够的请求配额，两个地图会分别发起数据加载和地图渲染请求
• 两个数据文件的格式要和原stores.json保持一致（包含stores数组，每个元素有lat、lng、name、address等字段）
• 如果需要添加搜索、筛选功能，也要把这些逻辑封装到函数内部，避免全局变量冲突

内容的提问来源于stack exchange，提问作者stardustking