title: Display multiple Google Maps "Store Locators" on one webpage
body: <p>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.</p>
  
  <p>This is the "Simple Store Locator" that Google lets me use:
  <a href="https://developers.google.com/maps/solutions/store-locator/simple-store-locator" rel="nofollow noreferrer">https://developers.google.com/maps/solutions/store-locator/simple-store-locator</a></p>
  
  <p>It uses the following files: </p>
  
  <ul>
  <li>stores.json</li>
  <li>app.js</li>
  <li>index.php</li>
  </ul>
  
  <p>Everything works fine when I only need one map. But in order to add the second map, I separated those files into:</p>
  
  <ul>
  <li>storesC.json</li>
  <li>storesH.json</li>
  <li>appC.js</li>
  <li>appH.js</li>
  <li>index.php</li>
  </ul>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="map"&gt;&lt;/div&gt;
  &lt;script src="../js/appC.js"&gt;&lt;/script&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&amp;callback=initMapC"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div class="map"&gt;&lt;/div&gt;
  &lt;script src="../js/appH.js"&gt;&lt;/script&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&amp;callback=initMapH"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p>In the appC.js and appH.js I renamed some of the functions and variables:</p>
  
  <ul>
  <li>const map --> <strong>const mapC</strong> and <strong>const mapH</strong></li>
  <li>const mapStyle --> <strong>const mapStyleC</strong> and <strong>const mapStyleH</strong></li>
  <li>function initMap --> <strong>function initMapC</strong> and <strong>function initMapH</strong></li>
  <li>etc....</li>
  </ul>
  
  <p>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.</p>
  
  <p>By the way: the Chrome Developer Console displays one error: "You have included the Google Maps API multiple times".</p>
  
  <p>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???</p>