Гугло карта, криво инициализируется если находится на скрытом табе

Question

[max_rip]

Выглядит вот так

Получается весь интерфейс, нормальный, а сама карта смещена налево вверх. Помогает только заново его проинициализировать, но это не выход ведь.
Таб скрывается display:none, по событию думреди, по нему же включается гугл карта.
Если перейти на эту страницу по ссылке, чтобы был активный таб который с картой, то все гуд.

Comments

[ngreduce]

не пробовали visibility: hidden?

[max_rip]

У табов разная высота, при visibility: hidden будут пустоты.
Не пробовал, просто не подходит такой трюк. Вполне спасает вызов тригера изменения размера карты. Костыли, а что делать.

[ngreduce]

Почему сразу костыль. Вполне нормальное решение.

[max_rip]

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

Answer 1

[lashtal]

— http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture

Answer 2

[Анатолий]

Попробуйте инициализировать в диве который не крыт а находится за краем экрана (position: absolute; left: -400px;)

Answer 3

[Wott]

надо диву что для карты выставить размеры через css

Comments

[max_rip]

Ну они и так выставлены. Не было бы их, карта сразу слохпнулась бы.

[Wott]

Видимо не там выставлены. Гугловый скрипт смотрит размер и видит 0 и рисует один элемент.

[max_rip]

даже если прописать style=«widht:350px;height:300px;» Если у родительского блока стоит display:none, то все печально. Тем более что после инициализации апи гугла затирает эти свойства. А в стилях и так все прописано.

Answer 4

[yesworld]

Я всегда вызываю триггер ресайз:
google.maps.event.trigger(map, 'resize');