CODEWITHSUNDEEP
javascriptjquery-mobilegoogle-maps-api-3
gurehbgui
gurehbgui

Reputation: 14694

Why my map does not re-size correctly?

I have a problem with a map, which does not re-size correctly. I have two pages: #page1 which is shown at start-up and #page2 which can be reached by a link in the tab.

On the #page1 I init. the map:

var map;
$(document).on('pageinit', '#page1', function () {
    // map init
    var mapOptions = {
        // karte wird initialisiert mit zoom aufs ruhrgebiet
        zoom: 12,
        center: new google.maps.LatLng(50, 7),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
});

then I added the code to resize the map when I get to the #page2:

$(document).on('pageshow', '#page2', function () {
    google.maps.event.trigger(map, "resize");   
});

The problem is, when I get to #page2 the first time the map has not the right size: enter image description here

How to fix this issue?

Upvotes: 0

Views: 49

Answers (1)

Gajotres
Gajotres

Reputation: 57309

That's because data-role="content" is not resizing to cover all available space.

Use this CSS on your content div:

.ui-content {
    position: absolute !important;
    top: 40px;
    right: 0;
    bottom: 40px;
    left: 0;
}

Replace 40px with 0 if you don't have header or footer.

Here's a great article talking about Google maps V3 API implementation with jQuery Mobile. It contains working examples.

Upvotes: 2

Related Questions