1

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>
Community
  • 1
  • 1
user1636051
  • 33
  • 2
  • 6

1 Answers1

4

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()));
});
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thank you Gajotres,i solved when i used jquery.ui.maps. And it is important not to use width:100% in canvas style. instead, resize canvas on pagebeforeshow event(your solution) Thank you very much
    – user1636051 Dec 14 '12 at 06:51
  • This works a treat, thanks :) just for the benefit of others don't forget to change the $('#MAP').live to your page name id – Garbit Feb 05 '13 at 13:33