Карты Google не отображают всю карту в полноэкранном режиме

Question

У меня возникли проблемы с изменением размера API JavaScript Google Maps v3. Если я установил «параметры» CSS прямо на загрузку (только в documentation), карта будет показывать 100% высоту и ширину - никаких проблем. Но когда я пытаюсь получить тот же результат, нажав на ссылку, он не отображает всю карту.

я испытал как css() и toggleClass() в JQuery на этом мероприятии. toggleClass() делает карту идет невидимая (скрывает карту полностью, а не делает его полный экран) с этим кодом:

// jQuery 
$('#weather-map').toggleClass('test'); 

// CSS 
#weather-map.test { 
    height : 100%; 
    width : 100%; 
    top : 0; 
    left : 0; 
    position : absolute; 
    z-index : 200; 
} 

css() работы (карта идет на весь экран), но выше изображение показывает, как карта оказывает на весь экран :

$('#weather-map').css({ 
         'height' : '100%', 
         'width' : '100%', 
         'top' : '0', 
         'left' : '0', 
         'position' : 'absolute', 
         'z-index' : '200' 
         }); 

Интересно, почему это так? Я что-то пропустил или этот метод не подходит для переключения полного экрана карты?

Заранее спасибо.

Answer 1

Это просто из-за того, как работает Javascript Google. Он отображает на основе размера контейнера и не добавляет какого-либо обработчика для повторной рендеринга, если после этого контейнер снова будет изменен. Я полагаю, что в приведенном выше примере вам нужно будет просто вызвать код инициализации карты второй раз, чтобы снова отобразить карту в вашем измененном div.