title: We are using three different maps on different pages and it works in Chrome, but?
body: <p>On my website we are using three different maps in two different pages(first one is used in the header). 
  And it seems to me that I can't get it to work. 
  So currently two out of three maps are working. 
  This is the code that I am using: </p>
  
  <pre><code>    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;ICLEI&lt;/title&gt;
      &lt;link rel="stylesheet" href="{{ asset('css/main.css') }}"&gt;
      &lt;link rel="stylesheet" href="{{ asset('css/selection.css') }}"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key={{YOUR-API-KEY}}&amp;callback=initMap"
              async defer&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defer&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;window.jQuery || document.write('&lt;script src="{{ asset('js/jquery-1.11.2.min.js') }}"&gt;&lt;\/script&gt;')&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ asset('js/jquery.main.js') }}" defer&gt;&lt;/script&gt;
      &lt;script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"&gt;&lt;/script&gt;
  
      &lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;
      &lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA-2790248-3"&gt;&lt;/script&gt;
      &lt;script&gt;
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
  
          gtag('config', 'UA-2790248-3');
      &lt;/script&gt;
      &lt;script&gt;
      var locations = [{
          lat: 37.4,
          lng: 128.4,
          "government_local_name": "\ud3c9\ucc3d\uad70",
          "city": "Pyeongchang County",
          "country": "Republic of Korea",
          "website": "eng.pc.go.kr"
      },
          {
              lat: 10.5,
              lng: 122.43,
              "government_local_name": "Bayan ng Dumangas",
              "city": "Dumangas",
              "country": "Philippines",
              "website": null
          }];
  
          var image = '{{ asset('images/marker-office.png') }}';
  
          function initMap() {
              var options = { imagePath: '{{ asset('images/m') }}'};
  
              var map = new google.maps.Map(
                  document.getElementById('map1'), {
                      zoom: 2,
                      center: {lat: 50.7374, lng: 7.0982},
                  }
              );
  
              var markers = locations.map(function(location, i) {
                  return new google.maps.Marker({
                      position: location,
                      icon: image
                  });
              });
  
              var activeInfoWindow;
  
              markers.forEach(function(marker, i) {
                  if(!locations[i].government_local_name){} else {
                      government = locations[i].government_local_name;
                  }
                  if(!locations[i].city){} else {
                      city = locations[i].city;
                  }
                  if(!locations[i].country) {} else {
                      country = locations[i].country;
                  }
                  if(!locations[i].website){} else {
                      website = locations[i].website;
                  }
                  var infowindow = new google.maps.InfoWindow({
                      content: "&lt;p&gt;"+ government +"&lt;/p&gt;" +
                      "&lt;p&gt;"+ city +"&lt;/p&gt;" +
                      "&lt;p&gt;"+ country +"&lt;/p&gt;" +
                      "&lt;p&gt;"+ website +"&lt;/p&gt;"
                  });
  
                  marker.addListener('click', function() {
                      if (activeInfoWindow === infowindow) {
                          return;
                      }
                      if (activeInfoWindow) {
                          activeInfoWindow.close();
                      }
                      infowindow.open(map, this);
                      activeInfoWindow = infowindow;
                  });
              });
  
              var markerCluster = new MarkerClusterer(map, markers, options);
          }
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key={{YOUR-API-KEY}}&amp;callback=initMap"
              async defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>As long as anyone can see I am using in here two scripts with maps. 
  With this code everything works out in chrome, but it doesn't work in Mozzila (thank God I have only those two browsers to support). The map which is supposed to show up on every page is just not working. And this is the error that is shown in mozzila console: </p>
  
  <blockquote>
    <p>uncaught exception: InvalidValueError: initMap is not a function
    You have included the Google Maps JavaScript API multiple times on
    this page. This may cause unexpected errors.</p>
  </blockquote>
  
  <p>And this is the console error that I have from Chrome: </p>
  
  <blockquote>
    <p>Uncaught Ob {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Ob (<a href="https://maps.googleapis.com/m" rel="nofollow noreferrer">https://maps.googleapis.com/m</a>…kLEDNWcj0IwFZ_Io84oExuE8g&amp;callback=initMap:162:56"}
    But everything is displayed in Chrome and one map is missing from Mozzila.
    Could someone else offer to me a solution ?  </p>
  </blockquote>
  
  <p>UPDATE: 
  If you are asking yourself why do I call api twice. Because if I call it only once from the top of the head then two maps are lost from both browsers. I believe that it has connection with calling the function back because in one browser (read Mozilla) it calls it if the maps api is called from the top and in Chrome it works if the api call is from bottom. 
  And if I put it inside once then in respective browsers it says that it misses the InitMap.</p>