Как перезагрузить Google Map в Bootstrap jQuery Tab
Я использую gmaps.js для загрузки 2 карт во вкладках Bootstrap. Что происходит, если первая карта загружается нормально, но когда нажимается вторая вкладка (скрытая), карта загружается неправильно. После интенсивного поиска в Google, я понимаю, что это связано с тем, что при нажатии на вкладку необходимо изменить размер карты Google, поскольку карты Google не очень хорошо работают со скрытыми вкладками. Однако, после многих попыток, я просто не могу заставить его работать. Вот моя скрипка:http://jsfiddle.net/7PueE/
/**
* Fort Collins Map
*/
$(document).ready(function () {
map = new GMaps({
div: '#fort-collins-map',
lat: 40.574859,
lng: -105.056756,
width: '100%',
height: '500px',
scrollwheel: false,
});
map.addMarker({
lat: 40.574859,
lng: -105.056756,
title: 'Fort Collins Office',
infoWindow: {
content: '<div class="bubble-wrap"><p class="office">Fort Collins Office</p><p>1120 E. Elizabeth St.</p><p>Suite F-101</p><p>Fort Collins, CO 80524</p><a href="https://www.google.com/maps/dir//1120+E+Elizabeth+St,+Fort+Collins,+CO+80524/@40.5748591,-105.0567559,17z/data=!4m13!1m4!3m3!1s0x87694ae0b3695899:0x5510539035305077!2s1120+E+Elizabeth+St!3b1!4m7!1m0!1m5!1m1!1s0x87694ae0b3695899:0x5510539035305077!2m2!1d-105.0567559!2d40.5748591">Directions</a></div>'
}
});
});
/**
* Loveland Map
*/
$(document).ready(function () {
map = new GMaps({
div: '#loveland-map',
lat: 40.431917,
lng: -105.078848,
width: '100%',
height: '500px',
scrollwheel: false,
});
map.addMarker({
lat: 40.431917,
lng: -105.078848,
title: 'Loveland Office',
infoWindow: {
content: '<div class="bubble-wrap"><p class="office">Loveland Office</p><p>3820 N. Grant Ave.</p><p>Loveland, CO 80538</p><a href="https://www.google.com/maps/dir//3820+N+Grant+Ave,+Loveland,+CO+80538/@40.4319173,-105.0788668,17z/data=!4m13!1m4!3m3!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2s3820+N+Grant+Ave!3b1!4m7!1m0!1m5!1m1!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2m2!1d-105.0788668!2d40.4319173">Directions</a></div>'
}
});
});