Серые прямоугольники появляются в частях встроенной карты Google в модальном окне.

У меня проблема с встраиванием карты Google через API v3 в модальное окно.

При отображении модального окна на холсте карты появляются серые поля. Изменение размера окна браузера, запуск Web Inspector и т. Д. Делает видимыми все фрагменты карты, то есть "принудительно повторно визуализирует" карту.

Родительский элемент элемента карты ( section # map-modal , см. Код ниже) имеет display: none , установленный в его CSS при загрузке страницы. Модальный код JS автоматически устанавливает display: block при нажатии кнопки «Показать». Если я временно удалю display: none из модального элемента, карта будет правильно отображаться при обновлении страницы. Разве Google Map не нравится иметь скрытый родительский элемент?

Я использую плагин Twitter Bootstrap для модального jQuery и контролирую сам модальный элемент с помощью CSS. Он фиксированный, имеет ширину в пикселях и т. Д. Ничего необычного.

Я, конечно, искал решения в Google, и многие указывает на метод Google API для запуска события resize :

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

Я действительно так и сделал, но безрезультатно.

Соответствующий код: https://gist.github.com/1591488

Как видите, я запускаю события в строке 39.

(нажмите Просмотреть карту большего размера внизу боковой панели).

Файлы:

• fagerhult.js
• fagerhult.map.js
• bootstrap-modal.js
• master.css

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