如何在Bootstrap jQuery Tab中重新加载Google Map

我正在使用gmaps.js在Bootstrap选项卡中加载2个映射。 会发生什么，第一个地图加载正常，但是当单击第二个选项卡（隐藏）时，地图无法正确加载。 经过广泛的谷歌搜索，我意识到这与谷歌地图有关，需要在点击选项卡时resize，因为谷歌地图不能很好地与隐藏的选项卡一起使用。 然而，在尝试了很多东西后，我无法让它发挥作用。 这是我的小提琴： 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: '
Fort Collins Office
1120 E. Elizabeth St.
Suite F-101
Fort Collins, CO 80524
Directions
' } }); }); /** * 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: '
Loveland Office
3820 N. Grant Ave.
Loveland, CO 80538
Directions
' } }); }); 

Answer 1

当显示选项卡时触发窗口的resize-event（当选项卡已经可见时， shown晚于click时触发）：

 $('.nav-tabs').on('shown.bs.tab', function () { google.maps.event.trigger(window, 'resize', {}); }); 

http://jsfiddle.net/BAm69/

Answer 2

试试这种方式

http://jsfiddle.net/7PueE/

Loveland

 function loadmap() { var nmap = new GMaps({ div: '#loveland-map', lat: 40.431917, lng: -105.078848, width: '100%', height: '500px', scrollwheel: false, }); nmap.addMarker({ lat: 40.431917, lng: -105.078848, title: 'Loveland Office', infoWindow: { content: '
Loveland Office
3820 N. Grant Ave.
Loveland, CO 80538
Directions
' } }); }