title: Google maps inside an hidden divs
body: <p>Basically we have a button and on a click an image is faded out showing the google map underneath (Gmap it is shown full screen as it is the image). But when I hit the button and the image fades out, the map isn't displayed. Doesn't appear at all.</p>
  
  <p>This is my html structure</p>
  
  <pre><code>    &lt;div id="map" class="wrapMap hidden-xs hidden-sm"&gt;
         &lt;div class="hidden-xs hidden-sm" id="map-canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="img_img row hidden-xs hidden-sm"&gt;
         &lt;div class="col-md-12 col-lg-12"&gt;
            &lt;img class="img-responsive" src="../img/home_img.jpg" alt="" /&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row row-home-img"&gt;
         &lt;div class="col-md-2 col-lg-2 hp-img-map"&gt;
              &lt;p class="view-map"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt; View map&lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Css (<strong>NOTE</strong> If I don't use <code>!important</code> the div doesn't hide, I believe it is due to gmaps loading)</p>
  
  <pre><code>.wrapMap {
    height: 100%;
    width: 100%;
    display: none !important;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>    $(".row-home-img").on("click", function(){
         $(".img_img").fadeTo(500, 0, function(){
            $(".wrapMap").show();             
         });
      });
  </code></pre>
  
  <p>I read about adding this to the jQuery once the div is visible but it isn't working for me</p>
  
  <pre><code>var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5fEA9/" rel="nofollow">http://jsfiddle.net/5fEA9/</a></p>