jquery - jqueryページを使用する場合、gmapは常にキャンバスの左隅にあります

Question

jQuery Page で gmap を作成しようとしましたが、常にキャンバスの左側に表示されます。

jQuery、js、Ajax、PhoneGap を使用しています。

html の 2 つの部分を追加しました。

最初のものはその頭にあります（マップページに変更したときに呼び出される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>

2 つ目は、2 ページを含む本文部分です。

最初のページには、マップ ページに移動するためのボタンがあり、ヘッド部分に楽しい関数を呼び出します。

地図を表示する 2 ページ目。

<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>

私が言ったように、マップは作成されましたが、キャンバスの左上隅にのみ表示されます。