Cómo centrar mapa de Google en tabs jQuery

Cuando colocamos un mapa en una tab jQuery que quede oculta surge un problema: el mapa no sale centrado. Este molesto bug ocurre porque el ancho y el alto del mapa se transforman a cero cuando la div tiene display: none;.

Colocando tabs de jQuery

Para poder uso de esta funcionalidad, tenemos que comenzar linkeando las versiones más recientes de jQuery y jQuery UI entre las etiquetas <head> de nuestro sitio.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Dentro de <head> iniciaremos las tabs de la siguiente manera

<script type="text/javascript">
 $(function() {
 $("#tabs").tabs();
 });
 </script>

Podemos cambiar la id de nuestro contenedor de #tabs a la que deseemos.

El HTML necesario para que funcionen está especificado a continuación, y si desean conocer más sobre los efectos que pueden lograr con este widget jQuery visiten la página de documentación.

  • Documentación: Tabs – jQuery UI

¡La solución es sencilla!

Cómo les explicaba anteriormente, este problema se origina porque las tabs que no están activas tienen el atributo CSS display: none; y éste desencadena que height y width del mapa se transformen a cero. Cuando ocurre esto el marcador de nuestro mapa no queda en el centro como debería.

Para que el mapa de la tab oculta siempre salga centrado necesitamos cambiar un poco nuestro código.

HTML

<ul>
<li><a href="#tab_1">Pestaña 1</a></li>
<li><a href="#tab_2" id="mapa">Pestaña con mapa</a></li>
</ul>
<div id="tabs">
<div id="tab_1">
 Contenido de la tab 1
</div>
<div id="tab_2">
</div>
</div>

En la tab donde irá el mapa, en este caso la tab_2, no tenemos que poner el código iframe del mapa. Si colocamos el mapa directamente en el HTML aunque añadamos comportamiento con jQuery el bug seguirá apareciendo.

Al link que lleva a la pestaña donde irá el mapa debemos agregarle una id. Esta id nos servirá como trigger en el jQuery.

jQuery

$(function() {
 $("#mapa").click(function(event) {
 event.preventDefault();
 $("#tab_2").css('display','block');
 $("#tab_2").html('Aquí va el código <iframe> del mapa');
 });
 });

Al hacer click en la pestaña con la id mapa se dispara un evento que hace lo siguiente:

  • .css() cambia a display: block; la tab que hasta el momento permanecía escondida
  • .html() introduce el código iframe de Google Maps en la tab recién desplegada

OTRAS APLICACIONES

Si queremos mostrar dentro de la tab el mapa y otros elementos, simplemente basta con agregar una id o class a la div que contendrá al mapa de Google. Si no especificamos la div contenedora, jQuery interpretará que debe ser colocado el HTML dentro de #tab_2 y suplantará todo su contenido.

<ul>
<li><a href="#tab_1">Pestaña 1</a></li>
<li><a href="#tab_2" id="mapa">Pestaña con mapa</a></li>
</ul>
<div id="tabs">
<div id="tab_1">
 Contenido de la tab 1
</div>
<div id="tab_2">
<p>Este es un bloque de texto, y a continuación te muestro un hermoso mapa</p>
<div class="mapa">
</div>
</div>
</div>

En este caso hemos colocado una línea de párrafo y una div extra con la class mapa, y ésta última será la contenedora del mapa.

$(function() {
$("#mapa").click(function(event) {
event.preventDefault();
$("#tab_2").css('display','block');
$("#tab_2 .mapa").html('Aquí va el código <iframe> del mapa');
});
});
Modificado por última vez el día 29 de noviembre de 2012 a las 16:40
Scroll to top