javascript — отображать несколько карт Google & quot; Локаторы магазинов & quot; на одной веб-странице

Question

javascript — отображать несколько карт Google & quot; Локаторы магазинов & quot; на одной веб-странице

У моей компании есть два разных продукта на рынке, и для каждого продукта у нас есть сеть дистрибьюторов. Я хотел бы отобразить их на нашем веб-сайте на одной странице с двумя различными встроенными картами Google, по одному для каждой сети.

Это «Простой локатор магазина», который Google позволяет мне использовать:
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 я затем вызываю API-карты Google дважды, даже с разными 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 mapC а также const mapH
const mapStyle -> const mapStyleC а также const mapStyleH
функция initMap -> функция initMapC а также функция initMapH
так далее….

Независимо от того, как я разделяю функции и переменные, страница никогда не загружает две карты одновременно. Иногда только первое, иногда только второе.

Кстати, в консоли разработчика Chrome отображается одна ошибка: «Вы включили Google Maps API несколько раз».

Я не могу найти никого в интернете с такой же проблемой. Я единственный человек в мире, пытающийся отобразить два локатора магазина на одной веб-странице ???

0

google-maps google-maps-api-2 google-maps-api-3 javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Не вызывайте API с 2 ключами. Вам нужен только один (и 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();
}

Связанный вопрос: Google Maps API: Heatmap & Поиск — Невозможно объединить в одну карту

1