在一个网页上显示多个 Google 地图 "Store Locators"

Question

我公司在市场上有两种不同的产品，对于每种产品，我们都有一个分销商网络。我想在我们的网站上显示这些，在一个页面上，有两个不同的嵌入式 Google 地图，每个网络一个。

这是 Google 让我使用的 "Simple Store Locator"： https://developers.google.com/maps/solutions/store-locator/simple-store-locator

它使用以下文件：

• stores.json
• app.js
• index.php

当我只需要一张地图时一切正常。但是为了添加第二张地图，我将这些文件分成：

• storesC.json
• storesH.json
• appC.js
• appH.js
• index.php

在 index.php 中，我然后调用 google 映射 api 两次，即使使用不同的 api 键。 （使用相同的密钥也不起作用）。我通过复制代码两次并调用正确的 app.js 和 initMap 回调来做到这一点。

<div class="map"></div>
<script src="../js/appC.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&callback=initMapC"></script>  

和

<div class="map"></div>
<script src="../js/appH.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&callback=initMapH"></script>  

在appC.js和appH.js中我重命名了一些函数和变量：

• const map --> const mapC 和 const mapH
• const mapStyle --> const mapStyleC 和 const mapStyleH
• function initMap --> function initMapC 和 function initMapH
• 等....

无论我如何分离函数和变量，页面都不会同时加载两个地图。有时只有第一个，有时只有第二个。

顺便说一句：Chrome 开发者控制台显示一个错误："You have included the Google Maps API multiple times".

我在 Internet 上找不到遇到同样问题的人。我是世界上唯一一个试图在一个网页上显示两个商店定位器的人吗？？？

Answer 1

不要用 2 个键调用 API。你只需要一个（API 抱怨：You have included the Google Maps API multiple times on this page. This may cause unexpected errors.）。

在（一个）回调函数中初始化两个地图。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&callback=initMaps"></script>
<script>
function initMaps() {
  initMapC();
  initMapH();
}

相关问题：