Google maps in hidden div

Question

I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div

Answer 1

I worked this out by binding the map resizing to the controller which unhides a section container. The important part here as it relates to needing to click twice to resize the map lies in the setTimeout bit. That will provide just enough of a delay to allow the width to be calculated on wrapper around the map.

/**
 * This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
 * Load a map object
 * Find it's parent (which is hidden)
 * Bind a click event to the element which 'unhides' your container
 * */
(function($) {
  Drupal.behaviors.foundationCollapseHack =  {
      attach: function(context, settings) {
          // check whether we have a map
          if(typeof settings.vrListingMap != 'undefined') {
              // on page load
              $(window).load(function() {
                // grab a map object
                var map = Drupal.behaviors.vrwebListingMaps.map;
                // if we have a section container
                if($(map.b).parents('.section-container').length > 0) {
                    // find any maps in these tabs and bind a click to it
                    $(map.b).parents('section').find('p.title').children('a').click(function() {
                      // B.c of timing - it's important to wrap the resize stuff in a timeOut.
                      // This assures that getComputedStyle is not null when resize fires
                      setTimeout(function() {
                          var coord = map.getCenter();
                          google.maps.event.trigger(map, "resize");
                          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);    
                        }, 0 );
                    });
                  }
               });
           }
        }
    }

})(jQuery);