Google Maps disappears after 1 second
<p>I am trying to implement the Google Maps API</p>

<pre><code>&lt;div id="mapContainer"&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
&lt;/div&gt;

#mapContainer {
  height: 300px;
  width: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}

#map {
  height: 100%;
}
</code></pre>

<p>And here is the initialisation (taken from Google's API website):</p>

<pre><code>&lt;script&gt;
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?key=***&amp;callback=initMap" sync defer&gt;&lt;/script&gt;
</code></pre>

<p>The problem is this: when the page loads, the map shows for 1 second and then it disappears. Not only this, but the whole <code>&lt;div id="map"&gt;&lt;/div&gt;</code> DOM element is removed from the page (checked with Dev Tools) and <code>js?key=***&amp;callback=initMap:35 Google Maps API error: ApiNotActivatedMapError</code> error gets thrown. How can I fix this?</p>

<p>**Key is hashed on purpose.</p>