title: Google Maps is grey
body: <p>I am using google maps in a mobile application using html and javascript. When the I load the map I am only able to see 5% of the map in the upper left corner. 95% of the div container is grey.
  When I want to check the div with Firebug the whole map is loaded suddenly.
  What can that be? 
  I tried already several Stackoverflow threads but no solution worked for me.
  Thank you. </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;link type="text/css" rel="stylesheet" href="jquery.mobile...&gt;
  &lt;link type="text/css" rel="stylesheet" href="index.css"&gt;
  &lt;script type="text/javascript" src="jquery.mobile...&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.mobile/jquery.mobile...&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"&gt;       &lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="index.js"&gt;&lt;/script&gt;
  
  &lt;div id="map" style="width: 700px; height: 700px;"&gt;&lt;/div&gt;
  
  var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 10,
         center: new google.maps.LatLng(-33.92, 151.25),
         mapTypeId: google.maps.MapTypeId.ROADMAP                                
  });
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>$(document).ready(function() {
      $(window).resize(function() {
          google.maps.event.trigger(map, 'resize');
      });
  });
  </code></pre>
  
  <p>When I use div attributes measured in % or em it doesnt work at all.</p>