由于Map顶部的图形画布而导致数据移位

Question

当csv数据被拖动到选项卡（图形或地图或表格）时，我有一个应用程序，数据将根据用户拖动csv数据的选项卡显示为（图形或地图或表格）。当我将数据拖到Map选项卡时，图形将显示在顶部，Map将显示在图形的底部。 div如下：

<div id="container" class="">
        <div class="row" style="height: 100%">
            <div id="area" class="col-sm-3 pull-right">
                Showing : 
            </div>
            <div class="col-md-2" >
                <div class="mini-submenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <div class="list-group">
                    <span class="list-group-item active-result">
                        Submenu
                        <span class="pull-right" id="slide-submenu">
                            <i class="fa fa-times"></i>
                        </span>
                    </span>
                    <a href="#" class="active list-group-item area">
                        Average
                    </a>
                    <a href="#" class="list-group-item area">
                        Sum
                    </a>
                    <a href="#" class="list-group-item area">
                        Minimum
                    </a>
                    <a href="#" class="list-group-item area">
                        Maximum
                    </a>
                    <div id="the-basics">
                        <input class="typeahead" id="textbox" type="text" placeholder="Filter by area">
                        <input type="button" id="btnclear" class="pull-right" onclick="cleardropdown()" value="Clear" />
                    </div>
                </div>
            </div>
            <div class="col-md-10">
                <div class="col-lg-12">
                    <canvas id="graph_map_canvas">

                    </canvas>
                </div>
                <div id="googlemaps"></div>
                <div id="map1"></div>
                <div>
                    <div class=colorramp></div>
                </div>
                <div id="slider"></div>

            </div>
        </div>
    </div>

图表将显示在画布ID“graph_map_canvas”中，并映射到div“googlemaps”中。问题是由于地图顶部的图形，地图容器“googlemaps”会因地图中显示的数据（“googlemaps”）被移动而移动或缩小。显示带有和不带图表的快照。很明显，谷歌地图中的快照数据会很好，没有图形在顶部，如果存在图形，它将被移动。 With_Graph_at_the_top_of_Map Without_Graph_at_the_top_of_Map