Google Map API V3 на скрытом div (вкладки jquery-ui)

Question

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

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

API V3 больше не будет принимать checkResize (), значение left: -1000px не является элегантным решением.

Я слышал, что откладывал построение карты и перезагружал карту, когда нажимал на вкладки, но, пожалуйста, помогите мне с точными кодами.

Answer 1

Почему вы говорите "left: -1000px '- не элегантное решение" ? Он хорошо работает для меня в API v2 и должен работать также для API v3 (не тестировался, дайте мне знать, если он не работает)

Перерисовка, то есть API v2 checkResize() выполняется в API v3 следующим образом:

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

Вот пример моего CSS для вкладок jquery-ui (вдохновленный http://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Answer 2

Если вы не можете зависеть от события Tab Show, вы можете добавить событие в событие нажатия Tab Tab вместо вызова initialize() на странице готовности.

$('#TabLink').click(function() {
    initialize();
});