jquery mobile + google maps / wrong height

alas with the following code it's doesn't work - only a bit of the map is visible, at the header. Maybe somebody can help?

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Map 2.0</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" />
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<body>
    <div data-role="page" id="map_page">

        <div data-role="header">
            <h1>
                Map
            </h1>
        </div>

        <div data-role="content" id="map_canvas">
        </div>

    </div>
    </body>
</html>

js:

$("#map_page").live("pageinit", function() {

    var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

css:

 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 100% }

Greets

@Omar: I tried to modify the code with your suggestions, but it still doesn't work. Maybe I overlooked something?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Map 2.0</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<body>
    <div data-role="page" id="map_page">

        <div data-role="header">
            <h1>
                Map
            </h1>
        </div>

        <div data-role="content">
            <div id="map_canvas"></div>
        </div>

    </div>
</body>
</html>

js:

$("#map_page").on("pageshow", function() {

    var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

css:

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }

Greets from Germany & Morocco

Solution

Here's a working example: http://jsfiddle.net/Gajotres/7kGdE/

Map page must be initialized during the pageshow event because only at that point correct height can b e calculated.

Also use of this function is necessary:

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

It is used to set a correct content height according to available height, header and footer height. If you take a look at this ARTICLE you will find much more information with few examples.