Multiple Google Maps & Bootstrap tabs only rendering on window resize

Question

Hi I have a handful of bootstrap tabs and multiple google maps in them.

I am using Wordpress with the ACF Google Maps plugin.

When toggling the tabs the first tab will render the google maps with the correct coordinates and display as it should. The next tab link I click shows a blank/grayed out Google Map, but upon re sizing my browser window the Map displays correctly.

I have tried a handful of solutions from the internet to no avail.

Here is my code

(function($) {

/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type  function
*  @date  8/11/2013
*  @since 4.3.0
*
*  @param $el (jQuery element)
*  @return  n/a
*/


function new_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom    : 11,
    center    : new google.maps.LatLng(0, 0),
    mapTypeId : google.maps.MapTypeId.ROADMAP
};

// create map           
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){
    add_marker( $(this), map );
});

// center map
center_map( map );
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
google.maps.visualRefresh = true;  

});
return map;  
}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type  function
*  @date  8/11/2013
*  @since 4.3.0
*
*  @param $marker (jQuery element)
*  @param map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'),    $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
position  : latlng,
map     : map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
  content   : $marker.html()
});

// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open( map, marker );
});
}
}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type  function
*  @date  8/11/2013
*  @since 4.3.0
*
*  @param map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

  // vars
  var bounds = new google.maps.LatLngBounds();

  // loop through all markers and create bounds
  $.each( map.markers, function( i, marker ){

  var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

  bounds.extend( latlng );
});

// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
  map.setCenter( bounds.getCenter() );
  map.setZoom( 11 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type  function
*  @date  8/11/2013
*  @since 5.0.0
*
*  @param n/a
*  @return  n/a
*/
// global var

var map = null;
$(document).ready(function(){
  $('.acf-map').each(function(){
       map = new_map( $(this));       
  });
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){      
        google.maps.event.trigger(map, 'resize');  
});

})(jQuery);//end closure main function

Answer 1

That's because hidden tabs have height=0 so map is also collapsed and invisible.

Add this into your CSS file to fix that (these rules have to go after bootstrap.css file):

.tab-pane {
    display: block !important;
    position: fixed;
    right: -9999px;
    width: 100%;
}
.tab-pane.active {
    position: relative;
    left: 0;
}