Проблемы с Google Maps API v3 + jQuery Вкладки UI

Я просмотрел все форумы в поисках ответ на этот вопрос ... все они сказали использовать решение

map.checkResize ()

.... казалось, ничего не работает ... тогда я ... почему бы не инициализировать вкладку, когда вкладка показано, поэтому я использовал этот

$("#servicesSlider ").tabs({        
                //event: 'mouseover'
            fx: { height: 'toggle', opacity: 'toggle'},
            show: function(event, ui) {
                  if (ui.panel.id == "service5") {
                      $(ui.panel).css("height","100%")
                    initialize()
                    }}
            });

"service5" - это идентификатор моей вкладки, на которой находится моя карта Google v3.

Надеюсь, это сработает для вас!

Вы можете вызвать

map.fitBounds (границы)

, которые будут делать обновление

У меня тоже была такая проблема, я загружал карты через AJAX.

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

Мне очень помогло использование следующего кода при создании вкладок:

$("#mainTabs").tabs({'show': function(event, ui){
  $(ui.panel).attr('style', 'width:100%;height:100%;');
  return true;
 }});

Убедитесь, что код, инициализирующий вашу карту, вызывается ПЕРЕД фрагментом, который инициализирует ваши вкладки.

Единственное, что меня раздражало, это то, что щелчок по вкладке карты заставлял браузер перескакивать, чтобы сфокусироваться на карте, и что он вырывался за пределы границы по умолчанию, которую jQuery помещает вокруг контейнера основных вкладок. Я добавил вызов return false onclick в тег a вкладки карты для обработки первого и простой размер границы: 0 в div основных вкладок для обработки второго.

У меня все это сработало.

Удачи!

На самом деле поцарапайте мой ответ выше. На веб-сайте jQueryUI есть ответ, и вот он:

Почему ...

... мой слайдер, Google Map, sIFR и т. Д. не работает при размещении в скрытом (неактивная) вкладка?

Любой компонент, требующий некоторых размерный расчет для его инициализация не работает в скрытом tab, потому что сама панель вкладок скрыто через дисплей: нет, так что любой элементы внутри не будут сообщать о своих фактическая ширина и высота (0 в большинстве браузеры).

Есть простой обходной путь. Использовать техника off-left для сокрытия неактивных панели вкладок. Например. в вашей таблице стилей заменить правило для класса селектор ".ui-tabs .ui-tabs-hide" с

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

Для карт Google вы также можете изменить размер карта, когда вкладка отображается как это:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap () вызовет функцию checkResize () Google Maps для конкретной карты.

Привет, ребята, этот код исправляет ошибку, но в IE не работает. После поиска и поиска я обнаружил, что мы должны добавить следующую строку, и все работает идеально:

< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->

Просто переопределите класс css для скрытой вкладки:

.ui-tabs .ui-tabs-hide {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
}