Ich habe eine PhoneGap-Anwendung, die mit JQuery Mobile zwischen den Seiten navigiert.

Wenn ich von der Hauptseite zu einer Seite navigiere, die eine Google-Karte enthält, wird in der oberen linken Ecke jeweils nur eine Kachel angezeigt:

Was kann der Grund dafür sein?

**

Quellcode: Das folgende Skript befindet sich im Kopf meiner Seite

<script>
            $(document).on("pageinit", "#stores", function () {
                var centerLocation = new google.maps.LatLng('57.77828', '14.17200');

        var myOptions = {
            center: centerLocation,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            callback: function () { alert('callback'); }
        };

        map_element = document.getElementById("map_canvas");




        map = new google.maps.Map(map_element, myOptions);

        var mapwidth = $(window).width();
        var mapheight = $(window).height();
        $("#map_canvas").height(mapheight);
        $("#map_canvas").width(mapwidth);
        google.maps.event.trigger(map, 'resize');

            });
        </script>

Meine Seite ist so

<!-- Home -->
        <div data-role="page" id="home">
.
.
.
</div>

<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>

Ich navigiere von zu Hause zur Kartenseite wie folgt:

<a href="#stores">Stores</a>

Aktualisieren Nach dem Auftragen der Gajotres-Lösung werden die Fliesen wie folgt