How can I display a full screen google map with jQuery Mobile?
google-maps, google-maps-api-3, jquery, jquery-mobile
Solution
The solution for my mobile website was to set styles `position:absolute; width:100%; height:100%;` for the canvas div. You can use the `top` and `bottom` styles to leave space for toolbars.
Problem
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.map for mapping. ``` <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content" id="map_canvas" name="contentMain"> </div><!-- /content --> </div><!-- /page --> <script> $('#map_canvas').gmap().bind('init', function() { // This URL won't work on your localhost, so you need to change it // see http://en.wikipedia.org/wiki/Same_origin_policy $.getJSON( 'http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { $.each( data.markers, function(i, marker) { $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds': true }).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); }); }); }); }); </script> </body> </html> ``` Output: Thanks in advance.