javascript - 在一个网页上显示多个 Google map "Store Locators"

Question

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

这是 Google 让我使用的“简单商店定位器”: https://developers.google.com/maps/solutions/store-locator/simple-store-locator

它使用以下文件:

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

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

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

在index.php中，我调用谷歌地图API两次，即使使用不同的API key 。 (使用相同的 key 也不起作用)。我通过复制代码两次并调用正确的 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 中，我重命名了一些函数和变量:

• 常量映射 --> 常量映射C和常量映射H
• const mapStyle --> const mapStyleC 和 const mapStyleH
• 函数 initMap --> 函数 initMapC 和 函数 initMapH
• 等等......

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

顺便说一句:Chrome 开发者控制台显示一个错误:“您已多次包含 Google Maps API”。

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

Answer 1

不要使用 2 个 key 调用 API。您只需要一个(并且 API 会提示:您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。)。

在(一个)回调函数中初始化两个映射。

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

相关问题:Google Maps API: Heatmap & Search - Cannot merge into single map