Javascript 为什么我的地图没有正确调整大小？

我的地图有问题，无法正确调整大小。我有两个页面：

#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

时，地图的大小不正确：

---

如何解决此问题？

这是因为

data role=“content”

没有调整大小以覆盖所有可用空间

在内容div上使用此CSS：

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

如果没有页眉或页脚，请将

40px

替换为

0

---

这里有一个很棒的介绍了使用jQuery Mobile实现Google maps V3 API。它包含工作示例

这并不能解决它，仍然有问题。这也很奇怪，然后我返回到第1页，然后返回到第2页。这一切都很好。看一篇文章中的例子。他们应该给你足够的信息，使这项工作。或者您可以创建一个JSFIDLE示例，只需将您拥有的一切都放在这里，我将对其进行排序并使其工作。