CODEWITHSUNDEEP
jqueryjquery-mobilegoogle-maps-api-3
Gi Joe
Gi Joe

Reputation: 23

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

Upvotes: 2

Views: 3876

Answers (2)

Jonny
Jonny

Reputation: 886

I had a similar issue: Page with header and footer while google maps in the middle was bigger and therefore a part of it behind the footer. This only happens when starting the app the very first time or emptying the cache and then reload the page with google maps.

I also ran into the trap that I set google maps in the .ready area. At that time the header and/or footer height of the page may return 0 and therefore the space to display google maps is calculated too big and therefore is partially hidden behind the footer. This can be checked by the set min-height of the page (done by JQuery Mobile). JQuery Mobile takes care of resizing and would properly resize the page with google maps on resizing the browsers on PCs or on mobile devices (turning by 90 degrees). Therefore setting a fixed height can cause wrong resizing later on. I suggest to initially set the min-with in the .ready area like this:

// Timeout ensures header/footer height are set
setTimeout(function() {
    $('#yourPageId').css('min-height', ($(window).height() - $('#yourHeaderId').height() - $('#yourFooterId').height() +1) + 'px');
}, 200);

Sure, you can avoid the timeout by putting the code in the "pageshow" event (with correct header and footer height) but then it fires every time when opening the page (f.e. in multipage projects) while JQuery Mobile has its own code to reset the height (correct).

Tested also on mobile devices (Chrome, Firefox, Safari)

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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.

Upvotes: 6

Related Questions