PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?

android cordova jquery-mobile google-maps-api-3 jquery-mobile-pageshow

19,360

intro

Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.

Your first problem was using pageinit event to the the calculation. At that point you cant get a correct page height and width. So instead use pageshow, you will find it working in my example.

Before you show the map you need to resize its content DIV. This is because content div will resize according to available inner elements. So we need to fix this manually, through javascript or CSS. I already have a answer on that question: google map not full screen after upgrade to jquerymobile 1.2 but I can also show you a working example:

Working example

Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).

Code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <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://maps.google.com/maps/api/js?sensor=true"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>

Javascript

Here's a function used to calculate correct page height:

   $('#map_canvas').css('height',getRealContentHeight());

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;
}

Another solution

There's also another solution to this problem that only uses CSS and it can be found HERE. I prefer this solution cause it don't require javascript to correctly fix the map height.

CSS:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

One last thing

Also if page width is still incorrect just set it to 100%:

$('#map_canvas').css('width', '100%');

19,360

Author by

Mina Wissa

Developer with experience in developing mobile applications for Android, iOS and Windows with native SDKs and cross platform frameworks. www.linkedin.com/in/mina-wissa

Updated on August 01, 2022

Comments

Mina Wissa almost 2 years

I have a PhoneGap application that uses JQuery mobile to navigate between pages.

When I navigate from the main page to a page containing a Google map, the map shows only a single tile at a time in the top left corner like this: enter image description here

What can be the reason for this ?

Source Code: The following script is in the head of my page

<script>
            $(document).on("pageinit", "#stores", function () {
                var centerLocation = new google.maps.LatLng('57.77828', '14.17200');

        var myOptions = {
            center: centerLocation,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            callback: function () { alert('callback'); }
        };

        map_element = document.getElementById("map_canvas");




        map = new google.maps.Map(map_element, myOptions);

        var mapwidth = $(window).width();
        var mapheight = $(window).height();
        $("#map_canvas").height(mapheight);
        $("#map_canvas").width(mapwidth);
        google.maps.event.trigger(map, 'resize');

            });
        </script>

My Page is like this

<!-- Home -->
        <div data-role="page" id="home">
.
.
.
</div>

<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>

I navigate from home to the maps page like this:

<a href="#stores">Stores</a>

Update after applying Gajotres solution the tiles become like this

Mina Wissa about 11 years

Tried your solution, the issue is still the same but the tile is larger. could it be anything else ?
Gajotres about 11 years

Why don't you try my solution inside your example. If my solution is also not working then problem is somewhere else.
Mina Wissa about 11 years

ok, tested again, the map appears to fit the window but whenever I touch the map it still displays a single tile as in the attached picture
Gajotres about 11 years

I think I understand your problem. You are appending it to the incorrect div. Dont append it to the data-role="content" div like this: <div data-role="content" id="map_canvas"></div> instead create an another div inside that one, like this: <div data-role="content"><div id="map_canvas"></div></div>. Basically you are fighting with a jQuery Mobile over a content div dimensions.
Mina Wissa about 11 years

Thanks a lot It worked after using your code in resizing the map canvas in "pageshow" instead of "pageinit"