title: Image not display correctly inside <div style="display:none;">
body: <p>In a Web Page, I'm trying to get the coords of an adress given by the user.</p>
  
  <p>I'm trying to do something like: <a href="http://www.bufa.es/google-maps-latitud-longitud/" rel="nofollow">http://www.bufa.es/google-maps-latitud-longitud/</a></p>
  
  <p>But I have a problem. The map is placed inside a div with this structure:</p>
  
  <pre><code>&lt;div id="divgeolocalizacion" style="display:none;"&gt;
  ...
  &lt;div style="width:100%; clear:both;"&gt;
      ...
      &lt;div style="float:left; width:57%; margin-right:3%;"&gt;
          &lt;div id="map"&gt;
              ...
          &lt;div&gt;
      &lt;div&gt;
  &lt;div&gt; 
  &lt;div&gt;
  </code></pre>
  
  <p>The user has a button on the page, which executes some javascript code. This code only changes the div display style to 
  "block". The problem is that the map is very very small. However, when I open developers's tools with F12, the image changes its size.</p>
  
  <p>Why i'm getting this strange behaviour? Before you ask, I didn't have any "console.log()" on my javascript code.</p>
  
  <p>Pd: When div's display style is initially set to "block" all works perfectly.</p>