Hi,
I've had the same problem with map_canvas not showing up in jqm.
Especially if you like to show the map in full screen and specify the height in %.
The problem is almost always the css of the html, body, wrapper and canvas.
In the code attached, based on the latest example above, i've included the necessary css for the map to show up.
Hope this will help someone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- JQM -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<!-- END OF JQM -->
<!-- Google Api V3 Declaration -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/geocode/output?parameters"></script>
<!-- End of Google Api V3 Declaration -->
<script>
$('#map_result').live('pageshow',function(event){
loadMap(48.870181,2.779852);
});
function loadMap(Lat, Long){
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_result{width:100%; height:100%;}
#map_canvas{width:100%; height:92%;padding:0;}
</style>
</head>
<body>
<div data-role="page" id="map_result">
<div data-role="header">
<h1>MAP V3 Sample</h1>
</div>
<div id="map_canvas"></div>
</div>
</body>
</html>
Marcus