Отображение карты Google из скрытой области

Я действительно надеюсь, что кто-то может посоветовать отобразить карту google из скрытого div.

У меня есть карта google, которую я хочу показать пользователю, если они нажмут на ссылку, то есть Show Map.

Помещение карты в скрытый div просто не работает, поэтому я пошел со скрытием карты -1000px в абсолютном значении позиции css.

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

http://screencast.com/t/MTMyOGZmNW

Может ли кто-нибудь дать мне совет по лучшему способу, чтобы скрытая карта стала видимой после того, как я продемонстрировал шоу?

Надеюсь, кто-то может посоветовать.

Спасибо

Ответ 1

Вам не нужно беспокоиться об абсолютной позиции и все такое. Пусть div будет скрыт до нужного значения, затем покажите его и вызовите google.maps.event.trigger(map, 'resize') (v3) или map.checkResize() (v2)

Дополнительный сценарий, упомянутый в комментариях:

Убедитесь, что вы вызываете google.maps.event.trigger(map, 'resize') ПЕРЕД вызовом map.fitBounds() или вы получите неожиданные результаты.

Ответ 2

Вы пытались называть событие изменения размера карты?

API Карт Google - Карта

Ответ 3

Почему бы не отложить рендеринг карты до тех пор, пока не отобразится div?

грубый код:

$("button").click(function() {
   $(mapDiv).show();
   new google.maps.Map(mapDiv, opts);
});