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

Question

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

19.3k Views Asked by Mina Wissa At 20 October 2024 at 05:47

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

Original Q&A

There are 2 best solutions below

BGecko On 03 September 2014 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

**Gajotres** · Accepted Answer

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

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

There are 2 best solutions below

intro

Working example

Code

HTML

Javascript

Another solution

CSS:

One last thing

Related Questions in ANDROID

Related Questions in CORDOVA

Related Questions in JQUERY-MOBILE

Related Questions in GOOGLE-MAPS-API-3

Related Questions in JQUERY-MOBILE-PAGESHOW

Trending Questions

Popular # Hahtags

Popular Questions