title: google map on top of div
body: <p>Good morning!
  I have the following problem:
  I have a div that contains the main information on the web page (container) and a div that contains a Google Map. The user clicks a div and the Google Map is supposed to show up on top of container (hiding the web page). When I click the div, all I get is depicted in the image below.
  <a href="http://prntscr.com/38ytlb" rel="nofollow">http://prntscr.com/38ytlb</a>
  Notice that the map is correctly displayed on the screen (the Google logo on the lower left side and the Terms of Use on the lower right side). The map, however, takes only a small portion of the viewport.</p>
  
  <pre><code>&lt;div id="container"&gt;
  ...
  &lt;/div&gt;
  &lt;div id="map-container"&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  #map-container {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 5;
  }
  
  #map-canvas {
      height: 100%;
      width: 100%;
  }
  
  $(document).ready(function () {
      $("#map-container").hide();
  
      $("#map-toggle").click(function () {
          $("#container").hide();
          $("#map-container").show();
      });
  });
  </code></pre>
  
  <p>Thanks in advance.</p>