Google Maps y jQuery Tabs

google-maps jquery-tabs

Question

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

A continuación pegué 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 HTML para las pestañas:

<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. ¿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.

De forma anticipada, muchas gracias por su ayuda

Answer 1

Si todavía estás luchando por hacer esto bien como yo, prueba 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 2

Fui con un enfoque diferente: inicializar 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 pestaña con la ID de su mapa coincida con la del script. En mi caso es "location_tab".

Answer 3

Inicializar el mapa cuando se abre la pestaña definitivamente es el camino a seguir. Si intenta inicializar el mapa en un div oculto, no se mostrará. Cualquiera sea la 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 se haya cargado el mapa, puede ocultarlo o mostrarlo sin problemas, así que vale la pena agregar una bandera para verificar si ya se ha cargado.

Answer 4

Los mapas de Google no funcionan bien cuando se ocultan elementos como las pestañas jquery cuando se cambian las pestañas.

La solución más simple es vincular la función de inicialización del mapa de google al evento tabsshow del objeto de tabulación 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 otros complementos que dependen del ancho y la ocultación de un elemento DOM como el plugin de mampostería jquery.

Answer 5

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'');
    });

Answer 6

He resuelto el problema

cambió hide () 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 7

¿Estás usando v2 o v3 de la API de Google Maps? Ha habido varias preguntas sobre este problema en el pasado, por ejemplo, esta (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.

[edit] Basándote en tus comentarios a continuación, te sugiero probar y usar una animación de 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;
});

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

Answer 8

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 (lamento no poder votar su respuesta ya que no tengo suficiente reputación ...)

Uso 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, tuve que enfrentar el 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;
}

});