title: Google Maps Resize not working
body: <p>I'm using Google Maps in a (initially hidden) tab, with the map being generated from the sample code provided by the Wordpress Advanced Custom Fields plugin.</p>
  
  <p>My map is opening with tiles missing.  I understand this is because the tab is initially hidden,and there are various solutions using <code>google.maps.event.trigger(map, "resize")</code> but for the life of me I can't get this working.</p>
  
  <p>Here's the acf code with the basic ammendments I've found, but still not working:</p>
  
  <pre><code>        (function($) {
              var map;
              function render_map( $el ) {
                  var $markers = $el.find(".marker");
                  var args = {
                      zoom        : 16,
                      center      : new google.maps.LatLng(0, 0),
                      mapTypeId   : google.maps.MapTypeId.ROADMAP
                  };
                  map = new google.maps.Map( $el[0], args);
                  map.markers = [];
                  $markers.each(function(){
                      add_marker( $(this), map );
                  });
                  center_map( map );
              }
  
              function add_marker( $marker, map ) {
                  var latlng = new google.maps.LatLng( $marker.attr("data-lat"), $marker.attr("data-lng") );
                  var marker = new google.maps.Marker({
                      position    : latlng,
                      map         : map
                  });
                  map.markers.push( marker );
                  if( $marker.html() )
                  {
                      var infowindow = new google.maps.InfoWindow({
                          content     : $marker.html()
                      });
                      google.maps.event.addListener(marker, "click", function() {
                          infowindow.open( map, marker );
                      });
                  }
              }
  
              function center_map( map ) {
                  var bounds = new google.maps.LatLngBounds();
                  $.each( map.markers, function( i, marker ){
                      var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
                      bounds.extend( latlng );
                  });
  
                  if( map.markers.length == 1 )
                  {
                      map.setCenter( bounds.getCenter() );
                      map.setZoom( 16 );
                  }
                  else
                  {
                      map.fitBounds( bounds );
                  }
  
              }
              $(document).ready(function(){
                  $(".acf-map").each(function(){
                      render_map( $(this) );
                  });
              });
              $(document).on("click", "#map-tab", function() {
                  alert("clicked");
                  google.maps.event.trigger(map, "resize");
                  map.setCenter( bounds.getCenter() );
                  map.setZoom( 16 );
              });
          })(jQuery);
  </code></pre>
  
  <p>Can anyone suggest what I'm doing wrong?  Very grateful for any  assistance</p>