使用jquery页面时，gmap始终位于画布的左下角

Question

我尝试在jQuery Page中创建一个gmap，它总是显示在画布的左侧。

我正在使用jQuery，js，Ajax和PhoneGap。

我添加了html的两部分。

第一个是它的头部（当我更改为地图页面时将调用的javascript函数）

<script type="text/javascript">
    function fun() {            
       $(function() {  
            demo.add(function() {
                $('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                        self.openInfoWindow({ 'content': 'Hello World!' }, this);
                    }); 
                    self.addMarker({'position': '57.7,12.0502107'  }).click(function() {
                        self.openInfoWindow({ 'content': 'Hello !' }, this);
                    }); 
                }});
            }).load();
    ///tried to add this line with no use --->       google.maps.event.trigger(map, 'resize');
        });}
    </script>

第二个是包含两页的正文部分。

第一页有一个按钮可以进入地图页面并在头部调用fun函数。

显示地图的第二页。

<div data-role="page" id="intro">

    <div data-role="header" data-position="fixed">
    <h1>header</h1>
    </div><!-- /header -->


    <div data-role="content">
    <h2>test</h2>
    <p><a href="#map" data-role="button" onClick="fun()" data-icon="arrow-r"> to map </a></p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
    <h2>footer</h2>
    </div><!-- /footer -->
</div>


<div data-role="page" id="map">

    <header class="dark">
        <div class="container_16">
            <h1>map header</h1>
        </div>
    </header>

    <div data-role="content">
        <div class="item rounded dark">
            <div id="map_canvas" class="map rounded"></div>
        </div> <!-- /content -->
    </div>


    <footer class="dark">
        <div class="container_16">
            <div class="grid_16">
                <h2>map footer</h2>
            </div>
        </div>
    </footer>
</div>

正如我所说，地图已经创建，但只显示在画布的左上角。