title: two googlemaps, one of them loading gray
body: <p>I'm trying to place two maps in my website, in toggleable tabs. 
  So when the site is loaded, the active pane map is loaded fine, but when I swap to another tab, it just stay gray:
  <a href="https://i.stack.imgur.com/fAcom.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fAcom.jpg" alt="enter image description here"></a></p>
  
  <p>But if I try it on my smartphone, works fine :S.</p>
  
  <p>Well, here is my code, I hope you can help me:</p>
  
  <p>DIVS:</p>
  
  <pre><code>        &lt;div id="huelva" class="tab-pane fade"&gt;
            &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding-top: 10px"&gt;
              &lt;div id="huelvamap" style="width:100%; height:300px; overflow: visible;"&gt;&lt;/div&gt;
            &lt;/div&gt; 
          ...
  </code></pre>
  
  <p>SCRIPT:   </p>
  
  <pre><code>      &lt;script&gt;
      function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('ceutamap'), {
          center: {lat: 35.8889515, lng: -5.3535556},
          scrollwheel: false,
          zoom: 12
        });
  
        var map2 = new google.maps.Map(document.getElementById('huelvamap'), {
          center: {lat: 37.2709008, lng: -6.9571999},
          scrollwheel: false,
          zoom: 12
        });
      }
    &lt;/script&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?key=[api_key]&amp;callback=initMap"
    async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p>If it's needed I will upload the site, post the link!</p>
  
  <p><a href="http://reumatologomanueltenorio.es/prueba2" rel="nofollow noreferrer">Here is the link to the site</a></p>
  
  <p>Thanks in advance</p>