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.

Code:

<link type=text/css rel=stylesheet href=jquery.mobile...>

<link type=text/css rel=stylesheet href=index.css>

<script type=text/javascript src=jquery.mobile...></script>

<script type=text/javascript src=jquery.mobile/jquery.mobile...></script>

<script type=text/javascript charset=utf-8 src=cordova-2.1.0.js>       </script>

<script src=http://maps.google.com/maps/api/js?sensor=false type=text/javascript></script>

<script type=text/javascript charset=utf-8 src=index.js></script>



<div id=map style=width: 700px; height: 700px;></div>



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                                

});

index.js

$(document).ready(function() {

    $(window).resize(function() {

        google.maps.event.trigger(map, 'resize');

    });

});

When I use div attributes measured in % or em it doesnt work at all.