Почему моя карта не правильная размер?

Question

У меня проблема с картой, которая не изменяется правильно. У меня есть две страницы: #page1, которая отображается при запуске и #page2, к которой можно связаться по ссылке на вкладке.

На #page1 I init. карта:

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

Затем я добавил код, чтобы изменить размер карты, когда я добираюсь до #page2:

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

Проблема заключается в том, когда я получаю #page2 в первый раз карта была не правый размер:

Как исправить эту проблему?

Answer 1

Это потому, что data-role="content" не изменяет размер, чтобы покрыть все доступное пространство.

Используйте этот CSS на вашем содержимого DIV:

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

Заменить 40px с 0, если у вас нет колонтитулы.

Отличный article, говорящий о Google maps Реализация V3 API с помощью jQuery Mobile. Он содержит рабочие примеры.