Google Maps V3 в скрытом div

Question

Я искал это, и кажется, что решения, которые я нашел, не работают для меня.

Конечная цель состоит в том, чтобы иметь две вкладки, одна с картами google v3 (которая по умолчанию показывает, не дошла) и одна вкладка, которая скрыта до щелчка.

Я могу заставить вкладки работать, но карты google не отображаются, я использовал изменение размера и установил центр в функции для вкладок, но все еще не работал. У меня также есть ширина & высота установлена ​​на 100% (для мобильных устройств).

Может кто-нибудь взглянуть на код и указать мне в правильном направлении, это было бы очень признательно! Опять же, конечная цель состоит в том, чтобы показать вкладки карт при загрузке страницы, а затем вкладки работают как пользователь, нажимает на них, показывая соответствующую вкладку. Но на данный момент вкладка карты даже не отображает карту.

мой код можно посмотреть на http://m.lewis-realty.net/map/test2.php?gps_lat=34.43640541614963&gps_lng=-77.5616387038574.

Спасибо!

Chris

Answer 1

Не уверен, если это то, что вызывает проблему, но на линии 94 «functions.js», есть Javascript ошибка - Вы упускаете открытия и закрытия скобки вокруг «если» состояние.

У меня нет возможности проверить его прямо сейчас, но это стоит того.

Answer 2

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

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

Answer 3

Я понял большую часть этого.

Наряду с картой изменения размера, который уже был в моем коде, я добавил это к функции закладки:

$('div#' + $(this).attr('data-href')).css('{display:block;width:100%;height:100%;}'); 

которая изменяет стиль CSS для DIV, вы выбираете, так что теперь карта работает нормально.