How can I display a full screen google map with jQuery Mobile?

Question

The following code displays strange output. I should see a full screen mobile map. But for some reason it shows on just a portion of the screen. I am using jquery.ui

Answer 1

The container and map canvas need to be 100% width and height.

From the jQuery mobile website their structure is:

    

        
Maps
    
    

        
    

And the CSS:

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

From here: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php