title: Shift in data due to graph canvas at the top of Map
body: <p>I have an application when a csv data is dragged to a tab(graph or map or table), the data will be displayed as (graph or map or table) based on the tab which the user had dragged the csv data. When i dragged a data to Map tab, the graph will be displayed at the top and Map will be displayed at the bottom of the graph. The div is as below:</p>
  
  <pre><code>&lt;div id="container" class=""&gt;
          &lt;div class="row" style="height: 100%"&gt;
              &lt;div id="area" class="col-sm-3 pull-right"&gt;
                  Showing : 
              &lt;/div&gt;
              &lt;div class="col-md-2" &gt;
                  &lt;div class="mini-submenu"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="list-group"&gt;
                      &lt;span class="list-group-item active-result"&gt;
                          Submenu
                          &lt;span class="pull-right" id="slide-submenu"&gt;
                              &lt;i class="fa fa-times"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                      &lt;/span&gt;
                      &lt;a href="#" class="active list-group-item area"&gt;
                          Average
                      &lt;/a&gt;
                      &lt;a href="#" class="list-group-item area"&gt;
                          Sum
                      &lt;/a&gt;
                      &lt;a href="#" class="list-group-item area"&gt;
                          Minimum
                      &lt;/a&gt;
                      &lt;a href="#" class="list-group-item area"&gt;
                          Maximum
                      &lt;/a&gt;
                      &lt;div id="the-basics"&gt;
                          &lt;input class="typeahead" id="textbox" type="text" placeholder="Filter by area"&gt;
                          &lt;input type="button" id="btnclear" class="pull-right" onclick="cleardropdown()" value="Clear" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;div class="col-lg-12"&gt;
                      &lt;canvas id="graph_map_canvas"&gt;
  
                      &lt;/canvas&gt;
                  &lt;/div&gt;
                  &lt;div id="googlemaps"&gt;&lt;/div&gt;
                  &lt;div id="map1"&gt;&lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class=colorramp&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="slider"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The graph will be displayed in the canvas id "graph_map_canvas" and map in   the div "googlemaps". The problem is because of the graph at the top of the map, the map container "googlemaps" gets moved or shrinked due to which data visualized in the map ("googlemaps") gets shifted. The snapshot showing with and without graph is shown. And it is clear in snapshot data in google maps will be good without graph at top and will be shifted if graph is present.
  <a href="http://i.stack.imgur.com/fjnVq.png" rel="nofollow">With_Graph_at_the_top_of_Map</a>
  <a href="http://i.stack.imgur.com/hJ1vz.png" rel="nofollow">Without_Graph_at_the_top_of_Map</a></p>