title: google maps now showing when you initialize in a display none div
body: <p>I am initializing a google maps in a display none div and something is wrong, I only see a grey square</p>
  
  <pre><code>&lt;div style="display:none;"  id="divMap"&gt;
       &lt;div id="map" style="width:300px; height:300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button onclick="showMap();"&gt;test&lt;/button&gt;
  </code></pre>
  
  <p>but when i remove style="display:none;" it works</p>
  
  <p>I have created a fiddler <a href="https://jsfiddle.net/ka8nywrg/2/" rel="nofollow noreferrer">https://jsfiddle.net/ka8nywrg/2/</a>
  you can test it from here.
  maps is shown when you press the button</p>
  
  <p>what should i do to prevent this situation?</p>
  
  <p><strong>code snippet</strong> (from posted fiddle):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
  
  function showMap(){
  
  document.getElementById("divMap").style.display = 'block'
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display:none;"  id="divMap"&gt;
  &lt;div id="map" style="width:300px; height:300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button onclick="showMap();"&gt;show map&lt;/button&gt;
  
  &lt;!-- Replace the value of the key parameter with your own API key. --&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>