Bootstrap选项卡中的Google Map

我正试图让Google Map出现在一个vanilla Bootstrap选项卡中。 我直接从Bootstrap文档构建了一个小提琴,Gmap脚本与Google建议的完全一样。

我将map对象转储到console.dir并且已经正确初始化。 在早期的项目中,我能够使用resize函数在选项卡中显示地图 – 但它似乎不适用于Bootstrap。

有没有人得到这个工作?

这是通用的jsfiddle– http://jsfiddle.net/B4zLe/4/

编辑:添加代码

JAVASCRIPT:

 var map; jQuery(function($) { $(document).ready(function() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); console.dir(map); google.maps.event.trigger(map, 'resize'); $('a[href="#profile"]').on('shown', function(e) { google.maps.event.trigger(map, 'resize'); }); }); }); 

HTML:

 

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

你对“resize”事件的强大程度有点过于乐观了。 从文档:

  • resize:当div改变大小时,开发人员应该在地图上触发此事件:google.maps.event.trigger(map,’resize’)

换句话说,resize不会做任何像花大小的地图到窗口的大小,但只会将其大小调整到它所在的容器 – 在本例中为“map_canvas”div。 但是,此div没有尺寸,因此地图的大小为零。

由于您添加了一些侦听器以确保地图将更改为其父级的大小,因此这是一个非常简单的修复 – 只需添加一些代码即可将父div修改为所需大小,并且地图将resize。 例如:

 $("#map_canvas").css("width", 400).css("height", 400); 

将它的大小设置为400×400。 这是一个例子 ,您应该能够将其更改为您想要的任何内容。

更新了Boostrap 3的答案:

 $("a[href='#my-tab']").on('shown.bs.tab', function(){ google.maps.event.trigger(map, 'resize'); }); 

请注意,您选择的是指向选项卡的链接,而不是选项卡本身。

不要使用.tab-content > .tab-pane {display: none}
用这个

 .tab-content > .tab-pane { display: block; height:0; overflow:hidden; } .tab-content > .active { display: block; height:auto; } 

显示选项卡时调整地图大小

http://jsfiddle.net/B4zLe/49/

  $('#myTab a[href="#profile"]').on('shown', function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(latlng); }); 

我也有使用Bootstrap 3的谷歌地图的问题,但我解决了安迪B代码基于微小技巧的问题:

  var cl=0; $("a[href='#maptab']").on('shown.bs.tab', function(){ cl++; if(cl == 1){ // this is to prevent map initialized twice or more initialize(); } else{ //do nothing } }); 

好吧..至少它对我的工作:)

 var map; jQuery(function($) { $(document).ready(function() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); console.dir(map); google.maps.event.trigger(map, 'resize'); $('a[href="#profile"]').on('shown', function(e) { google.maps.event.trigger(map, 'resize'); }); $("#map_canvas").css("height", 400); }); }); 

小提琴

问题仍然存在于2016年,删除google DOM处理程序并使用jQuery“show”触发器调用initialize()函数,如上所述。 然后在点击TAB时加载地图

google.maps.event.addDomListener(window,’load’,initialize);

 jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e) { initialize(); }); 

仍然遇到Bootstrap 3.3.7,jquery 1.11.3和标签的问题。 一切正常,直到您尝试将地图放入首先隐藏加载的标签。 然后你加载地图,一切都应该工作,但你只看到灰色(或任何其他颜色,不确定)的地图区域。 你可以在那里做所有事情,但你看不到地图本身。 在地图内拖动时,您可能会看到一些东西,但一般来说 – 空白地图。

选项1 – 当您调整窗口大小时,您可以看到地图。 但也有垮台 – 一旦你改变标签,它就会再次消失。

选项2 – 您可以将地图放在第一个选项卡上并完成它。

选项3 – 你可以制作一个代码来“resize”地图(如前所示)。 但在那里我遇到了问题 – 这并不总是有效。 至少它不适合我:

 .on("shown", function(){}) .on("shown.bs.tab", function(){}); .on("show.bs.tab", function(){}); ... 

几乎任何变化都不起作用。 我设法通过使用链接ID而不是href比较来使其在第一次选项卡上单击,但是当我点击另一个选项卡然后再次返回时,灰色地图再次…我很喜欢 – 认真!?

最后,我提出了解决方案:在特定的选项卡上单击(通过id,我推荐),它可以完成所有必要的操作。 这意味着以下 – 每次你点击其他地方(其他链接或标签)并返回地图选项卡,它将重新加载该地图(因此可能会有点慢 – 取决于互联网),但至少我得到地图,而不是空谷歌地图的灰色图像。

希望将来帮助别人。

使用下面的脚本

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { init(); }); 

cevatasln绝对精彩的解决方案。 我也使用了所有可能的jQuery和Javascript解决方案,没有一个工作! 如果您想要定位特定标签并使用动态图库或其他东西,这将适合您

 .tab-content > #tab5.tab-pane { display: block; height:0; max-height:0; overflow:hidden; } .tab-content > #tab5.active { display: block; height:auto; max-height: 100%; }