Como (supongo) casi todo programador web que ha hecho desarrollos para internet, he tocado en múltiples ocasiones partes del API de google maps.

Hace unos pocos días nos encontramos uno de esos problemas curiososos. Resulta que teníamos varios mapas en una misma página, dentro de la que habían mapas en capas ocultas usando css. La curiosidad en cuestión es que al hacer visibles esas capas no se pintaban correctamente los mapas.

Buscando un poco que podría estar pasando, resulta que cuando creas el mapa google maps coge los estilos que hay en ese momento, y al pasar de oculto a visible el API no es consciente que ha cambiado la visibilidad del elemento que lo contiene y donde se pinta.

Esto en la V2 del API se solucionaba usando checkResize, pero resulta que para V3 no está disponible ese método para notificar al mapa que se redimensione.

La necesidad de un checkResize está reportado como bug de la versión 3. Pero por suerte en los mismos comentarios aparecen algunas soluciones que me han venido como anillo al dedo para ir trasteando y terminar implementando una solución un poco más a mi gusto, añadiendo a la clase de google.maps.Map un comportamiento equivalente:


google.maps.Map.prototype.checkResize = function() {
   var center = this.getCenter();
   google.maps.event.trigger(this, 'resize')
   this.setCenter(center);
}


Y así ya puedo utilizar el checkResize en los mapas del mismo modo que en la versión 2.