Google Map API V3 en Hidden Div (pestañas jQuery-UI)

Question

Sé que este problema es antiguo, pero parece que no puedo encontrar una instrucción clara para ello.

La esencia del problema es que el mapa de Google no se cargaría por completo (parcialmente mostrado) cuando se carga en un divs oculto (pantalla: ninguno), pestañas por ejemplo, pestañas, etc.

API V3 ya no aceptaría checkResize (), la 'izquierda: -1000px' no es una solución elegante.

He oído retrasar la construcción del mapa y recargar el mapa al hacer clic en las pestañas, pero ayúdame en los códigos exactos.

Answer 1

Por qué dices "Izquierda: -1000px 'no es una solución elegante"? Funciona mucho para mí en API V2 y debería funcionar también para API V3 (no probado, avíseme si no funciona).

Redibujado, es decir, API V2 checkResize() se logra de esta manera en API V3:

google.maps.event.trigger(map, 'resize');

Aquí hay un ejemplo de mis pestañas CSS para jQuery-Ui (inspirado enhttp://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Answer 2

En caso de que no pueda depender de un evento de show de pestaña, puede agregar el evento en el enlace de pestaña Haga clic en el evento en lugar de llamar initialize() en la página listo.

$('#TabLink').click(function() {
    initialize();
});