Javascript 引导选项卡中的谷歌地图

我正试图让谷歌地图出现在一个普通的引导标签中。我直接从Bootstrap文档中创建了一个fiddle，Gmap脚本与谷歌推荐的脚本非常相似

我正在将

map

对象转储到console.dir，并且它已正确初始化。在早期的项目中，我已经能够使用

resize

功能在选项卡中显示地图，但它似乎不适用于引导

有人用过这个吗

下面是通用的JSFIDLE--

编辑：添加代码

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:

生料牛仔布你可能没听说过，奥斯汀牛仔短裤。雀巢豆腐阿利夸，复古合成大师清洗。威廉斯堡卡尔斯素食者赫尔维蒂卡的胡子陈词滥调。Reprehenderit butcher retro keffiyeh dreamcatcher synth。Cosby毛衣eu banh mi，qui irure terry richardson前鱿鱼。salvia cillum iphone上的Aliquip placeat。Seitan aliquip quis羊毛衫美国服装，屠夫voluptate nisi qui

您对“调整大小”事件的功能有点过于乐观。从

• 调整大小：当div更改大小时，开发人员应该在地图上触发此事件：google.maps.event.trigger（地图“调整大小”）

换句话说，resize不会像调整映射到窗口的大小那样做任何花哨的事情，但只会调整映射到它所在的容器的大小——在本例中是“map_canvas”div。但是，这个div没有维度，因此映射的大小为零

由于您添加了一些侦听器以确保映射将更改为其父级的大小，因此这是一个非常简单的修复方法-只需添加一些代码将父级div修改为所需的大小，映射将根据需要调整大小。例如：

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

---

将其大小调整为400x400，你应该可以把它换成你想要的任何东西

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

---

Boostrap 3的更新答案：

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

---

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

使用Bootstrap 3的谷歌地图也有问题，但我使用基于代码的小技巧解决了这个问题：

嗯。。至少对我来说是这样：）

---

不要使用

.tab content>.tab窗格{display:none}

使用这个

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

.tab-content > .active {
    display: block;
    height:auto;
}

---

问题在2016年仍然存在，请删除google DOM处理程序，并使用jQuery“show”触发器调用initialize（）函数，如上所述。然后单击选项卡加载地图

google.maps.event.addDomListener（窗口“加载”，初始化）

---

引导程序3.3.7、jquery 1.11.3和选项卡仍然存在问题。在您尝试将地图放入首次隐藏的加载选项卡之前，一切正常。然后加载地图，一切正常，但只看到地图的灰色（或其他颜色，不确定）区域。你可以在那里做任何事情，但是你看不到地图本身。在地图内部拖动时，您可能会看到一些东西，但通常情况下-空白地图

选项1-当您调整窗口大小一段时间后，您可以看到地图。但也有下降趋势——只要你们改变标签，它就会再次消失

选项2-您可以将地图放在第一个选项卡上，然后使用它

选项3-只需编写代码“调整”地图大小（如前所示）。但在那里我遇到了问题——这并不总是有效的。至少它对我不起作用：

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

几乎所有的变化都不起作用。我通过使用链接ID not href COMPASISION成功地使它在第一次单击选项卡时工作，但当我再次单击另一个选项卡并返回时，再次使用灰色地图。。。我是说真的

最后，我提出了解决方案：在特定的选项卡上单击（我建议按id），它可以完成所有必要的操作。这意味着，每次你点击其他地方（其他链接或选项卡）并返回地图选项卡时，它都会重新加载地图（因此可能会有点慢，取决于互联网），但至少我得到了地图，而不是谷歌地图的空灰色图像

希望将来能帮助别人。

使用下面的脚本

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

            init();

        });

---

绝对精彩的解决方案。我也是，我已经使用了所有可能的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%;
}

---

@泡泡——谢谢！我理解这是如何工作的，但谷歌地图的默认行为不适合它所在的容器吗？我想我不知道如何处理div仅为100%的情况。是的，但在这种情况下容器的大小为零。我认为这可能有点鸡或蛋的问题-div通常会扩展以适应内容（这取决于样式规则，但我们将忽略细节），但在这种情况下，内容取决于容器的位置。因此，内容查找容器以确定大小，找到零大小，并将其自身设置为零（容器从不展开，因为内容从不展开）。您必须添加一些大小调整规则，即使它只是告诉“map\u canvas”将自身大小调整为其父对象的大小。谢谢：-我正在使用

$（“#map\u canvas）.wdith（）

获取容器的宽度，并将其设置为贴图的宽度--但是当我尝试使用

.height（）时

要获取容器的高度，它不返回任何内容：--有想法吗？这是同一个问题-map_canvas是一个容器，在指定它之前没有高度，或者它的内容获得高度（因为它是一个块元素，它的宽度自然会达到它可以填充的最大大小）。这是css的一个有点粗糙的解决方法，但它可能没有您希望的那么灵活。在另一个选项卡中添加街景地图时，如何也能做到这一点。我只是无法让它工作。我尝试过，但没有成功。您需要保持当前的百分位

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

.tab-content > .active {
    display: block;
    height:auto;
}

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

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

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

            init();

        });

.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%;
}