Google maps in hidden div / WebKit 1.5.6 / joomla 3.4.3

Приветсвутю.

У Google maps есть известная проблема с отображением в спрятанных блоках (display: none; )

Поисковики выдают решение. Но оно подходит только для страниц с одной картой, да и если карту вставляли не плагином, а ручками.
http://yandex.ru/search/?text=google map div hidden

На сайте на одной старнице вывел сразу 5 карт с помощью WebKit 1.5.6, и засунул их в слайдер. Соответственно, работает только одна из карт, а остальные не отображаются.

Пример: http://reduktor-perm.ru/контакты/

Вопрос: как обратиться к каждой из карт по отдельности или ко всем сразу (как вариант)?
Необходимо в скрипте прописать строки по типу этих:

Код:

 var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center);

или этих:

Код:

google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom());

но на странице 5 карт, и как поймать эту map не понятно.

Кто сталквался с такой проблемой?
WebKit 1.5.6 / joomla 3.4.3 / карта google в скрытых блоках

покопался, нашел временное решение.
На клик по табу повесил функцию initialize();

Код:

jQuery('#tabs a').click(function(e) {
            e.preventDefault();
            jQuery("#content-tab div.onetab").hide(); //Скрыть всё содержимое
            jQuery("#tabs li").attr("id",""); //Сброс идентификаторов
            jQuery(this).parent().attr("id","current"); // Активация идентификаторов
            jQuery('#' + jQuery(this).attr('title_tab')).fadeIn(); // Показать содержимое текущей вкладки
            initialize();
        });

но это решение на уровне шаманства. не всегда срабатывает.

причем, если после загрузки страницы изменить размеры окна, то все карты прогружаются.
Но вызов jQuery(window).resize(); результата не дает.

ок много информации - это радует - спасибо что оформляете топик таким образом.
по порядку:
никогда не гуглите в яндексе!!! никогда не гуглите на гугл.ру
Вопрос: как обратиться к каждой из карт по отдельности или ко всем сразу (как вариант)?
у вас у каждой карты уникальный id пример map-58-55ded3d0dc894 - соответственно прописать нужные строки не составляет труда
ко всем сразу можно обратиться по классу wk-map

то что у вас на сайте видимо уже подправлено - у меня все ок - верните как было чтобы можно было потестировать

это результата давать не должно - вы видимо плохо понимаете что оно делает)

хорошее решение

через час выделю немного времени и предложу решение на уровни виджет кита, хотя в вашем случае думаю будет достаточно динамически задавать высоту и ширину для wk-map

сейчас карты отображаются через раз. А значит не работают. По крайней мере на моём компе. Проверил на другом - вроде как рабоатет.. как бы потом не всплыло. Сейчас все временные решения закоменчены.

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

На счет id для каждой карты "id пример map-58-55ded3d0dc894 " - id меняется каждый раз при обновлении страницы.

И помоему с строке google.maps.event.trigger(map,'resize'); - maps не является объектом jQuery("#map-58-55ded3d0dc894")

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

а причем здесь map?) это же виджет кит - то что вы в интернете первый попавшийся ответ нашли не значит что он будет работать

я писал про то что по идее просто меняя width height можно все починить - но можно решить иначе - в виджет ките есть свой метод вызова карты - я его чуть позже найду и отпишусь - с примером - сейчас немного занят.

ок, я посмотрел ошибку

Код:

jQuery( ".wk-map" ).each(function() {
  jQuery(this).googlemaps(jQuery(this).data().options)
});

вот этот код позволяет перегружать все карты на странице - по идее этого кода будет достаточно чтобы все работало (если вставите этот код заместо
initialize()) - это метод который используется widgetkit - никаких хаков

вот док-во что все работает

если бы вы табы использовали получше - например noname то можно было бы использовать текущий класс таба и не использовать each но и так сойдет

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

+ еще проблема - есть ли в виджете возможность отследить загрузку карты?
т.к. если вставить код просто в jQuery(document).ready(function($){ }); то googlemaps еще не известен и выдает ошибку.
также тоже не вариант обновлять карту при очередном клике на таб. их надо обновить один раз при прогрузке всех карт.

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

в моем примере тоже можно обратиться к одной карте.
выглидит у меня это так:

Код:

var tab_content_name = '#' + jQuery(this).attr('title_tab') + ' .wk-map';
jQuery(tab_content_name).googlemaps(jQuery(tab_content_name).data().options);

глупость пишите „+ еще проблема - есть ли в виджете возможность отследить загрузку карты?“
в виджет ките карты грузятся lazy load - вот код который их грузит

Код:

(function($){$widgetkit.lazyloaders["googlemaps"]=function(element,options){$widgetkit.load(WIDGETKIT_URL+"/widgets/map/js/map.js").done(function(){element.googlemaps(options)})}})(jQuery);

/media/widgetkit/widgets/map/js/lazyloader.js - вот что грузит карты
вам не нужно в документ реди ничего прописывать - с первой картой проблем нет - если есть смените модуль/плагин табов - он у вас кривоват

давайте без экспериментов - просто копируйте то что я вам пишу) - раз уж вы помощи попросили давайте я буду думать как все решить а вы не будете выдумывать нерабочие решения и создавать ошибки на пустом месте. - я тут предлагаю универсальные решения - чтобы у человека после вас они тоже сработали - я не буду писать специфичный код чтобы подстроиться под конкретно ваши кривые табы.

пожалуйста не пытайтесь умничать и думать что вы понимаете проблему - вы сильно усложняете мою работу этим.

вот подправленный код - то что у вас на странице называется cluster marker - то что он появляется это баг widgetkit

Код:

jQuery( ".wk-map" ).each(function() {
    jQuery( this ).data("options").clusterMarker=false;
    $widgetkit.lazyloaders["googlemaps"](jQuery(this),jQuery(this).data('options'))
});

док-во что все работает

если будут еще ошибки буду рад поправить, только не надо предлагать своих решений

спасибо большое! проблема вроде бы полностью решена)
(я и не претендую, что знаю вебкит лучше вас)