Google maps not loading in automatic div

Question

I have a strange case of malfunctioning Google maps where I'm putting multiple maps on a page but showing only the ones for the visitor's country, which is automatically selected if the visitor is in one of the countries on the (short) list, otherwise it defaults to Guatemala, first on the list.

It all works fine except for the maps that appear on the first loaded country, only on some random refreshes will those load, if you go to another country in the dropdown those maps will load fine, if I remove 'display: none' from 'section' they all load (but that defeats the purpose of the filtering by ip scripts)

I was unable to make it work here as code snippet so please find it here. If three maps load fine on page load, try hitting refresh.

And here is a version without section display: none, all maps load fine, but the page loses its desired behavior.

Got a negative vote so I'll try to add some of the code:

$.get("http://ipinfo.io", function (response) {
  if($(".CC option[value='"+response.country+"']").length > 0){
    $('.CC').val(response.country).attr('selected',true);
  }
  $().html(response.country);
  if( response.country=='GT'||
    response.country=='IN'||
    response.country=='US'){
  document.getElementById(response.country).style.display = "block";
  } else {
    document.getElementById('GT').style.display = "block";
  }
}, "jsonp");

function hideAllContent(){
  Array.prototype.forEach.call(document.getElementById('stage').children, function(v){
    v.style.display = 'none';
  })
}
function showCountry(divId){
  var el = document.getElementById(divId);
  if(el){
    hideAllContent();
    el.style.display = 'block';
  }
}

body {
 font-family: 'Verdana';
 font-size: 0;
}
* {
 margin: 0;
 padding: 0;
}
main {
 text-align: center;
    max-width: 900px;
    margin: auto;
}
select {
 margin: 24px;
 font-size: 20px;
}
section {
 display: none;
}
article {
 color: grey;
 overflow: hidden;
 display: inline-block;
 width: calc(33% - 30px);
 margin: 15px;
 border-radius: 6px;
}
figure {
 height: 180px;
}
figcaption {
 font-size: 20px;
 line-height: 24px;
}
.map {
 width: 100%;
 height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<main>
  
  <select onchange="showCountry(value);" class="CC">
   <option value="GT">Guatemala</option>
   <option value="IN">India</option>
   <option value="US">USA</option>
  </select>
   
  <div id="stage">

   <section id="GT">
    <article>
     <figure><div id="mapGT1" class="map"/></figure>
     <figcaption>Guatemala 1</figcaption>
    </article>
    <article>
     <figure><div id="mapGT2" class="map"/></figure>
     <figcaption>Guatemala 2</figcaption>
    </article>
    <article>
     <figure><div id="mapGT3" class="map"/></figure>
     <figcaption>Guatemala 3</figcaption>
    </article>
   </section>

   <section id="IN">
    <article>
     <figure><div id="mapSV1" class="map"/></figure>
     <figcaption>India 1</figcaption>
    </article>
    <article>
     <figure><div id="mapSV2" class="map"/></figure>
     <figcaption>India 2</figcaption>
    </article>
    <article>
     <figure><div id="mapSV3" class="map"/></figure>
     <figcaption>India 3</figcaption>
    </article>
   </section>
   
   <section id="US">
    <article>
     <figure><div id="mapNI1" class="map"/></figure>
     <figcaption>USA 1</figcaption>
    </article>
    <article>
     <figure><div id="mapNI2" class="map"/></figure>
     <figcaption>USA 2</figcaption>
    </article>
    <article>
     <figure><div id="mapNI3" class="map"/></figure>
     <figcaption>USA 3</figcaption>
    </article>
   </section>

  </div>

 </main>

Answer 1

Alright, so the display property was definitely the culprit and I finally found this issue addressed here, but instead of going with that two property solution I turned "display: none" into "height: 0" and "display: block" into "height: auto".