Javascript 将搜索框放置在引导活动选项卡内容未显示的内部

我试图在引导选项卡内容中显示谷歌地图。我可以在不使用选项卡的情况下显示地图。当我将地图画布放置在选项卡内容内时，出现问题，地图不会显示

index.xhtml：

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
    <li><a href="#orange" data-toggle="tab">Orange</a></li>
    <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box"></input>
        <div id="map-canvas" ></div>

    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>

</div>

档案：

<link href="bootstrap.min.css" rel="stylesheet"></link>
<link href="style.css" rel="stylesheet"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

---

我发现了问题，谢谢@BalusC。在他编辑了我的问题后，我改进了搜索，发现了以下内容：

我笨拙的css：

#map-canvas{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px
}

问题在于父母的体型。应该是这样的：

#map-canvas {
    width: 100px;
    height: 100px;
    margin: 0px;
    padding: 0px
}

还有，我的js缺少事件触发器：

google.maps.event.trigger（映射，'resize'）

#map-canvas {
    width: 100px;
    height: 100px;
    margin: 0px;
    padding: 0px
}

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