Google Maps y jQuery Tabs

Question

Tengo un ligero problema con los mapas de Google incluidos en las pestañas jQuery simples.

continuación he pegado el código:

jQuery:

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").hide(); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).fadeIn(); 
     return false; 
    }); 

}); 

Aquí está el código HTML de las fichas:

<div class="bluecontainer"> 
    <ul class="tabs"> 
     <li><a href="#tab1">Tab1</a></li> 
     <li><a href="#tab2">Tab2</a></li> 
     <li><a href="#tab3">Tab3</a></li> 
     <li><a href="#tab4">Tab4</a></li> 
    </ul> 
    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <h2>Tab1</h2> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <h2>Tab2</h2> 
     </div> 
     <div id="tab3" class="tab_content"> 
      <div> 
       google Map 
      </div> 
     </div> 
     <div id="tab4" class="tab_content"> 
      <h2>Tab4</h2> 
     </div> 
    </div> 
</div> 

Realmente no sé qué hacer para. ¿Es ese un problema general con google maps o hay algo con mis pestañas? Pero están funcionando bien con todo lo demás.

Gracias por su ayuda de antemano

Answer 1

He resuelto el problema.

cambio de ocultar() en jQuery a css.visibility, por lo que las pestañas se ven así.

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).css({'visibility':'visible' , 'position':'static'}); 
     return false; 
    }); 

}); 

Todo funciona bien.

Answer 2

¿Está utilizando v2 o v3 de la API de Google Maps? Ha habido varias preguntas sobre este problema en el pasado, por ejemplo this (que también se relaciona con algunas de las otras preguntas similares). Puede valer la pena leerlos y ver si alguna de las soluciones sugeridas le funciona.

[editar] Sobre la base de sus comentarios a continuación sugeriría a tratar de utilizar una animación opacidad en lugar de la fadeIn:

//Default Action 
$(".tab_content").animate({ opacity: 0 }, 0); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").animate({ opacity: 1 }, 0); 

//On Click Event 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab_content").animate({ opacity: 0 }, 0); 
var activeTab = $(this).find("a").attr("href"); 
$(activeTab).animate({ opacity: 1 }, 500); 
return false; 
}); 

he utilizado yo mismo para una página utilizando Google Maps API v3 y jQuery (no las pestañas JQuery, sin embargo) y funcionó bien para mí.

Answer 3

Fui con un enfoque diferente: inicializa el mapa después de activar la pestaña. Aquí está mi código:

//Default Action 
jQuery(".tab_content").hide(); //Hide all content 
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab 
jQuery(".tab_content:first").show(); //Show first tab content 

//On Click Event 
jQuery("ul.tabs li").click(function() { 
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class 
    jQuery(this).addClass("active"); //Add "active" class to selected tab 
    jQuery(".tab_content").hide(); //Hide all tab content 
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    jQuery(activeTab).fadeIn(); //Fade in the active content 
    if(activeTab == '#location_tab') {  
     initialize(); 
    } 
    return false; 
}); 

Asegúrese de que la lengüeta con su mapa ID coincide con el guión de. En mi caso es "location_tab".

Answer 4

Inicializar el mapa cuando se abre la pestaña es definitivamente el camino a seguir. Si intenta inicializar el mapa en un div oculto, no se mostrará. Cualquier función que tenga que 'muestre' su div, use esa función para inicializar el mapa DESPUÉS de que se haya mostrado el div.

if(!maploaded && $("#" +tab2id+ "content").hasClass("map")) { 
    LoadGoogleMap(); 
    maploaded = true; 
} 

Una vez que el mapa se ha cargado, puede ocultar o mostrar de manera segura el div de nuevo sin ningún problema, por lo que vale la pena añadir una bandera para comprobar si ya se ha cargado.

Answer 5

Google maps no funciona bien cuando se ocultan elementos como las pestañas jquery cuando se cambian las pestañas.

La solución más simple es unir función de mapa de inicialización Google al evento tabsshow del objeto pestaña jquery

$("#tabs").bind("tabsshow", function(event, ui) { 
      if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs 
      initialize(); //google map initialization code 
     } 
     }); 

Esta solución funciona con cualquier otro plugins que depende de la anchura y la piel de un elemento de DOM como el jquery masonry plugin.

Answer 6

Si todavía está luchando por hacer esto bien como yo, intente esto.

var hasLoadedMap = false; 
$("#tabs").tabs({ 
     activate: function(event, ui) { 
      //console.log(ui.newTab.context.id); 
      if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs 
       console.log(ui.newTab.context.id); 
       initialize(); //google map initialization code 
       hasLoadedMap = true; 
      } 

     } 
}); 

He adaptado las otras respuestas anteriores a algo más actual.

Answer 7

He estado luchando con esto también. Así que proporcionaré el código que me ayudó a hacer esto, gracias al código proporcionado por Fuzz (lo siento, no puedo votar su respuesta ya que no tengo suficiente reputación ...)

I use campos personalizados avanzados para mostrar un mapa de Google. Usé el código provisto por ACF de la documentación en el sitio web de acf y modifiqué el último bit (la parte "Document ready") para poder mostrar mi mapa usando el colapso de Bootstraps. La div con el mapa está oculta por la secuencia de comandos colapsar y cuando se muestra, se activará javascript para mostrar el mapa. Después de ocultar el mapa me enfrenté al problema de que la configuración de ubicación de los mapas había desaparecido al volver a mostrar el mapa. Con la ayuda del guión de Fuzz lo conseguí funcionando correctamente. Espero que esto ayude a otros también.

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){ 
if(!hasLoadedMap){ 
$('.acf-map').each(function(){ 

    render_map($(this)); 

}); 
hasLoadedMap = true; 
} 

}); 

Answer 8

Bootstrap3: https://github.com/twbs/bootstrap/issues/2330

$('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e) 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });