Home/ Questions/Q 8997299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:52:15+00:00

Below example belongs Tolis Emmanouilidis and is for jquerymobile 1.0.1 . when i want

  • 0

Below example belongs Tolis Emmanouilidis and is for jquerymobile 1.0.1 . when i want to upgrade it to 1.2.0, map isn’t full screen in frame, only a part of it is shown on top-left corner of frame

Internet is full of example with jquerymobile and google maps. after upgrade to jqm 1.2.0 maps have this problem and not much source on this topic.

Can you help me to solve this issue?

http://jsfiddle.net/jCemG/4/

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=el"> </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Map</h1>
                <a href="page_1_intro.html" id="home" rel="external" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Home</a>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should solve your problem:

    $('#map').live('pagebeforeshow',function(e,data){
    $('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height()));
});
    • 0