Карты Google и вкладки jQuery - PullRequest
Новая
       68

Карты Google и вкладки jQuery

6 голосов
/ 10 июня 2010

У меня небольшая проблема с картами Google, включенными в простые вкладки jQuery.

Ниже я вставил код:

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

});

Вот HTML-код длявкладки: 

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

Я действительно не знаю, что с этим делать.Это общая проблема с Google Maps или что-то с моими вкладками?Но они отлично работают со всем остальным.

Заранее спасибо за помощь

Ответы [ 8 ]

7 голосов
/ 14 июня 2010

Я решил проблему.

изменил hide () в jQuery на css.visibility, поэтому вкладки выглядят так. 

$(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;
    });

});

Все работает отлично.

6 голосов
/ 30 мая 2014

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');
    });
4 голосов
/ 19 июня 2010

Я пошел другим путем - инициализировать карту после активации вкладки. Вот мой код: 

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

Убедитесь, что вкладка с идентификатором вашей карты совпадает со сценарием. В моем случае это "location_tab".

3 голосов
/ 24 апреля 2012

Инициализация карты при открытии вкладки - это, безусловно, путь. Если вы попытаетесь инициализировать карту на скрытом элементе div, она не будет отображаться. Независимо от того, какая у вас функция, которая «показывает» ваш div, используйте эту функцию для инициализации карты ПОСЛЕ отображения div. 

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

После того, как карта была загружена, вы можете спокойно и без проблем снова скрывать или показывать div, поэтому стоит добавить флаг, чтобы проверить, загружена ли она уже.

0 голосов
/ 27 марта 2014

Я тоже с этим боролся.Поэтому я предоставлю код, который помог мне сделать это, благодаря коду, предоставленному Fuzz (извините, я не могу проголосовать за ваш ответ, так как у меня недостаточно репутации ...)

Я использую Расширенные пользовательские поля для отображения карты Google.Я использовал код, предоставленный ACF документации на веб-сайте acf, и изменил последний бит (часть «Готовность к документу»), чтобы иметь возможность показывать мою карту с помощью коллапса Bootstraps.Элемент div с картой скрыт сценарием свертывания, и при его отображении будет запущен JavaScript для отображения карты.После сокрытия карты я столкнулся с проблемой, что настройки местоположения карт пропали при повторном отображении карты.С помощью фрагмента скрипта Fuzz я получил правильную работу.Надеюсь, это поможет и другим. 

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

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});
0 голосов
/ 18 марта 2014

Если вы все еще изо всех сил пытаетесь сделать это правильно, как я, попробуйте это. 

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

      }
});

Я адаптировал другие ответы выше в нечто более актуальное.

0 голосов
/ 28 мая 2012

Карты Google не работают хорошо, когда вы скрываете элементы, как вкладки jquery, когда вы меняете вкладки.

Самое простое решение - привязать функцию инициализации карты Google к событию tabsshow объекта вкладки 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
        }
        });

Это решение работает с любыми другими плагинами, которые зависят от ширины и скрытия DOMтакой элемент, как плагин jquery masonry.

0 голосов
/ 10 июня 2010

Используете ли вы v2 или v3 API Карт Google?В прошлом было несколько вопросов об этой проблеме, например this one (который также связан с некоторыми другими подобными вопросами).Возможно, стоит прочитать их и посмотреть, подходит ли вам какое-либо из предложенных решений.

[править] На основании ваших комментариев ниже я бы предложил использовать анимацию непрозрачности, а не 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;
});

Я сам использовал его для страницы, используя Google Maps API v3 и JQuery (но не для вкладок JQuery), и он отлично работал для меня.

...