title: Media Queries: Google Map not displaying right on window resize
body: <p>I am using an adaptive layout on my site by using media queries.</p>
  
  <p>Now when I resize the browser window past a certain media query, the <strong>google map displays faulty (see image)</strong></p>
  
  <p>What I do:</p>
  
  <p>CSS:</p>
  
  <pre><code>#googleMap2{display: none;}
  
  @media screen and (min-width: 919px){
     #googleMap{display: none;}
     #googleMap2{display: block;}
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="googleMap"&gt;[google-map-v3 width="920" height="550" .......]&lt;/div&gt;
  &lt;div id="googleMap2"&gt;[google-map-v3 width="768" height="320" .......]&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/gjtHT.png" alt="**enter image description here**"></p>