问Google v3:地图显示:无；在地图初始化后导致地图损坏

EN

window.onload = function(){
  changeTheme(me); // do it now so current_theme is avaible to switchTabs();
    switchTabs("tab3"); // sets map div visible
  initMaps(); // map initialization. code included.
  loadFavoritePlaces(); // asynch $getJSON call, adds markers. No matter the condition of map, markers appear in their proper locations.
  closePopup("images");
  closePopup("location"); // sets maps.mini_map display: none; Problems if we loadUserTable() later. Otherwise OK. Odd!
  closePopup("tweet");
  centerDiv();
  document.title = '@'+me.screen_name+' - PithyTwits.com';
  users[me.id_str] = me;
  getPage(); // asynch $.getJSON loads tweets. Not an issue.
  
  // Append a scroll event handler to tweet_div
  $("#tweet_div").scroll(function() {
    var pos = $(this)[0].scrollHeight - $(this).scrollTop();
    if(pos != prev_scroll){ // hack to prevent scroll function from firing twice
      prev_scroll = pos;
      if (pos == $(this).outerHeight()) {
        $("#throbber").fadeIn();
        getPage();
      }
    }
  });
  
  loadUserTable(me.id_str);
  /* loadUserTable(); calls switchTabs("tab1"); which sets map div display: none;
  if I comment this out the map initialization completes properly, but my 'tab1'
  doesn't get populated properly. And page doesn't start on 'tab1', which is required. */
  
// end window.onload()
}

function initMaps() {
    
    // markers list
  maps.markers = new Object;
  
  // visibility status'
  maps.markerStatus = new Object;
  maps.markerStatus['query'] = true;
  maps.markerStatus['tweet'] = true;
  maps.markerStatus['favorite'] = true;
  
  // define marker images
  maps.reticleImage = new google.maps.MarkerImage('images/reticle.png',
    new google.maps.Size(63, 63),
    new google.maps.Point(0,0),
    ...
    Declarations removed to streamline post.
    ...
    new google.maps.Point(0,0),
    new google.maps.Point(1, 13));
  maps.markerShape = {
      type: "poly",
      coords: [9,22,16,11,16,5,11,1,6,1,2,5,2,11,9,22]
      }
    
  // setup map options
  var latlng = new google.maps.LatLng(39.520427, -94.770621);
  var latlng2 = new google.maps.LatLng(46.1912, -122.1944);
  var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var myOptions2 = {
    zoom: 13,
    center: latlng2,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    mapTypeControl: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  
  // initialize maps
  maps.main_map = new google.maps.Map(document.getElementById("map_div"), myOptions);
  maps.mini_map = new google.maps.Map(document.getElementById("mini_map"), myOptions2);

  // default map center markers
    maps.mini_map_marker = new google.maps.Marker({
    position: latlng2,
    map: maps.mini_map,
    icon: maps.favoriteMarker, 
    shadow: maps.markerShadow,
  });
  maps.reticleMarker = new google.maps.Marker({
    position: latlng,
    map: maps.main_map,
    shape: reticleShape,
    icon: maps.reticleImage,
  });
  
  // event handlers
  google.maps.event.addListener(maps.main_map, 'zoom_changed', mapZoomed);
  google.maps.event.addListener(maps.main_map, 'bounds_changed',
      function(){maps.reticleMarker.setPosition(maps.main_map.getCenter());});

  //idle event listener provided by @Guan in the marked answer.
  google.maps.event.addListenerOnce(maps.main_map, 'idle', function() {
      var div = document.getElementById("tab3_content"); 
      div.style.display = "none"; 
      div.style.position = "relative"; 
      div.style.left = "0px"; 
  });

  // initialize controls
  var controls = document.getElementById("visibility_controls");
  maps.main_map.controls[google.maps.ControlPosition.TOP_CENTER].push(controls);
  controls.style.display = "inline";
  var controls = document.getElementById("control_controls");
  maps.main_map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(controls);
  controls.style.display = "inline";
  var controls = document.getElementById("query_controls");
  maps.main_map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controls);
  controls.style.display = "inline";
}

id="tab3_content" style="display: block;position: absolute; left: -1000px;"

google.maps.event.addListenerOnce(maps.main_map, 'idle', function() {
  var div = document.getElementById("tab3_content"); 
  div.style.display = "none"; 
  div.style.position = "relative"; 
  div.style.left = "0px"; 
});