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 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.

Answer 2

I've been messing around with this for a bit, and managed to find the perfect solution. It caters for pages with or without a header. It will position the map perfectly in the space between the header and the bottom of the page (or on the whole page if a header is not present), for any resolution and any header height.

This solution requires both CSS and JS if the page has a header, and CSS only if the page does not have a header.

HTML

<div data-role="page" id="mapPage">
    <div data-role="header"`>
        <!-- your header HTML... -->
    </div>

    <div data-role="content">
        <div id="map-canvas"></div>
        <p id="nogeolocation"></p>
    </div>
</div>

CSS

#map-canvas {
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
}

/* eliminates scrollbars in map infowindow (optional) */
#mappopup {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

JS

var mapPageHeader = $("#mapPage .ui-header").eq(0);
if(mapPageHeader.length > 0) {
    var headerHeight = mapPageHeader.outerHeight();
    $("#map-canvas").css({
        'height': ($(window).height() - headerHeight + 1) + 'px',
        'top': headerHeight - 1
    });
}

Answer 3

Header and footer are unavoidable if you're using jQuery. I set {data-position="fixed" data-fullscreen="true"} for both header and footer, and set html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } as well, so that both the menu and the map perfectly work together on the mobile device.

Answer 4

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

From the jQuery mobile website their structure is:

<div data-role="page" id="map-page" data-url="map-page">
    <div data-role="header" data-theme="c">
        <h1>Maps</h1>
    </div>
    <div data-role="content" id="map-canvas">
        <!-- map loads here... -->
    </div>
</div>

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