Не видна карта google при открытии первоначально скрытого блока

256

14 июня 2017, 03:53

Добрый день! В моём приложении несколько страниц (через блок div), Одна из страниц содержит карту google (js api, ключ есть). По логике работы приложения страница с картой в начале скрыта (hidden = True), она (страница) становится видимой по нажатии нужного пункта меню. Когда страница открывается (через hidden = false), карта не видна. Хотя маркер, например, виден, и он на месте. Если в этом состоянии приложения перейти в отладчик (в chrome, yandex - не важно, просто включить режим отладки), то тут же карта становится видимой, и дальше остаётся видимой при смене видимости окон (страниц) приложения. Если карту помещаю в блок div, сразу видимый в начале работы, она видна. В чём тут дело, подскажите, пожалуйста?

Answer 1

Чтобы отрисовать карту, Google Maps API должен знать размер контейнера карты, в случае скрытого элемента с display: none размер отсутствует, и карта не отрисовывается должным образом. Когда вы изменяете видимость блока с картой, то контейнер карты получает размер, но API об этом ничего не знает, и ему нужно сообщить об этом дополнительно, например, так:

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

где map — объект карты.

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