title: gmap3 init action doesn't display map properly in hid div
body: <p>I think I really should be posting new question instead of responding to a closed post. </p>
  
  <p>Here I have two tabs for 2 maps. One is hiden. They both start blank and identical so I use gmap3 selector to initialize both maps in one shot. clicking on the tabs would bring up corresponding map without reinitializing. Thanks to Philar and MattBall, using resize fixed one display problem. However, the map that is initially hidden is off center and at a different zoom level. No clue why. Anyone have any idea? Here is the code.</p>
  
  <pre><code>function initmap() {  
  // setup map and basic overlay
  $('.gmap').gmap3(
      { action: 'init',
          options: {
              zoom: DefaultZoom,
              minZoom: DefaultMinZoom,
              center: mapcenter,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              scrollwheel: false,
              rotateControl: false,
              zoomControl: true,
              zoomControlOptions: {
                  position: google.maps.ControlPosition.RIGHT_TOP,
                  style: "SMALL"
              },
              panControl: false,
              panControlOptions: {
                  position: google.maps.ControlPosition.RIGHT_TOP,
                  style: "SMALL"
              },
              streetViewControl: false,
              heading: 90
          }
      },
      { action: 'addGroundOverlay',
          url: '../maps/assets/sectors_color.png',
          bounds: [
              [49.313821, -123.022082],
              [49.199900, -123.264825]
          ],
          tag: 'SectorMapOverlay'
      }
  );
  map1 = $(mapID1).gmap3('get');
  map2 = $(mapID2).gmap3('get');
  $("#switchmap").click(function () {google.maps.event.trigger(map1, 'resize')});
  $("#switchmap2").click(function () {google.maps.event.trigger(map2, 'resize')});
  }
  </code></pre>