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

Question

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

http://stackoverflow.com/questions/13823556/google-map-not-full-screen-after-upgrade-to-jquerymobile-1-2 — Gajotres, Apr 16 '13 at 13:41
I was experiencing similar problems myself. I found that when the page was initialized, the map would be sized based on what it thought it's currently available size is, but if you later made it visible, it wouldn't automatically resize. `google.maps.event.trigger(map, "resize");` should do something like that for you, but you'll have to call it when you make the map visible. — Jamie Starke, Apr 16 '13 at 15:54

score 9 · Accepted Answer · edited May 23 '17 at 12:28

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%');

Tried your solution, the issue is still the same but the tile is larger. could it be anything else ? — Mina Wissa, Apr 16 '13 at 13:59
Why don't you try my solution inside your example. If my solution is also not working then problem is somewhere else. — Gajotres, Apr 16 '13 at 14:01
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 — Mina Wissa, Apr 16 '13 at 14:20
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:
instead create an another div inside that one, like this:
. Basically you are fighting with a jQuery Mobile over a content div dimensions. — Gajotres, Apr 16 '13 at 14:23
Thanks a lot It worked after using your code in resizing the map canvas in "pageshow" instead of "pageinit" — Mina Wissa, Apr 17 '13 at 09:50

score 0 · Answer 2 · answered Sep 03 '14 at 06:53

I have had this issue for months banging my head against the wall trying to find a solution. Even setting the style properties for the content and map-canavas divs did not solve all the problems. google.maps.event.trigger(map, "resize") did not do it either. The map was full screen now but still centered in the top left. And if you called your initialize functions on every pageshow the map would reset back to its original position each time.

I was able to come up with this called on the pageshow event and solved all my problems!

$('map-page').on("pageshow", function() {
    var latLng = map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(latLng);
});

CSS

<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

  .ui-page { -webkit-backface-visibility: hidden; }

</style>

Here is my content and map-canvas div.

<div data-role="content" id="mapContent" style="padding:0;position:absolute;
top:40px;right:0px;bottom:60px;left:0px; ">
    <div id="map-canvas" style="width:100%;" >
    </div>
</div><!-- /Content -->

It gets the current center of the map, resizes the map to the current div, then sets the map center. This way, if the user navigates away from the page and comes back, the map does not lose its position.

Hope this helps.

Robert