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

Display multiple Google Maps "Store Locators" on one webpage

My company has two different products on the market, and for each product we have a network of distributors. I'd like to display these on our website, on one page, with two different embedded Google Maps, one for each network.

This is the "Simple Store Locator" that Google lets me use: https://developers.google.com/maps/solutions/store-locator/simple-store-locator

It uses the following files:

stores.json
app.js
index.php

Everything works fine when I only need one map. But in order to add the second map, I separated those files into:

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

In the index.php I then call the google maps api twice, even with different api keys. (using the same key doesn't work either). I do this by copying the code twice and calling the right app.js and initMap callback.

<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>

and

<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>

In the appC.js and appH.js I renamed some of the functions and variables:

const map --> const mapC and const mapH
const mapStyle --> const mapStyleC and const mapStyleH
function initMap --> function initMapC and function initMapH
etc....

No matter how munch I separate the functions and variables, the page never loads two maps at the same time. Sometimes only the first, sometimes only the second.

By the way: the Chrome Developer Console displays one error: "You have included the Google Maps API multiple times".

I'm not able to find anyone on the internet with this same problem. Am I the only person in the world trying to display two store locators on one webpage???

Solution

Don't call the API with 2 keys. You only need one (and the API complains: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.).

Initialize both maps in the (one) callback function.

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