Merkblatt & jQuery Mobile - Anpassung der Ausgabe

Derzeit ein Problem mit dem bekommen von jQuery Mobile und Merkblatt zum spielen schön zusammen. Ich kann nicht scheinen, um Broschüre, um die Größe der Karte auf 'pageinit', und stattdessen öffnet sich nur in einem kleinen Feld in der linken oberen Ecke.

Die zoom-Stufe ist ebenfalls falsch. Ich habe versucht die Einstellung zu einem timeout und die invaidateSize Methode, aber ich bin immer noch Probleme. Ich bin auch mit einer festen Kopf-und Fußzeilen und die Bedienelemente sind verdeckt von Ihnen. Dies ist die Seite des code -

<div data-role="page" data-theme="d" id="eventMap" data-add-back-btn="true">

        <div data-role="header" data-position="fixed" data-id="pageheader">
            <h1>Find Events</h1>
        </div>

        <div data-role="content" class="ui-content">    

            <div id="mapcanvas"></div>

        </div>


        <div data-role="footer" data-position="fixed" data-id="pagefooter">

            <div data-role="navbar">
                <ul>
                    <li><a href="eventmap.php" class="ui-btn-active">Map</a></li>
                    <li><a href="eventlist.php">List</a></li>
                </ul>
            </div>
        </div>


        <script type="text/javascript">

        function resize() {

            var content, contentHeight, footer, header, viewportHeight;
            window.scroll(0, 0);
            header = $(":jqmData(role='header'):visible");
            footer = $(":jqmData(role='footer'):visible");
            content = $(":jqmData(role='content'):visible");
            viewportHeight = $(window).height();
            contentHeight = viewportHeight - header.outerHeight() - footer.outerHeight();
            $(":jqmData(role='content')").first().height(contentHeight);
            return $("#mapcanvas").height(contentHeight);
        };  

        $('#eventmap').live('pageinit orientationchange resize', resize);



        $('#eventMap').live('pageinit', function() {    

            //MAP
            var tiles, map;

            map = new window.L.Map('mapcanvas');

            tiles = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Eventi8'});
            map.addLayer(tiles);
            map.locateAndSetView(16);

            map.on('locationfound', onLocationFound);

            function onLocationFound(e) {


                var circle = new L.Circle(e.latlng, 30);

                map.addLayer(circle);

                var url = 'inc/eventdistancejson.php?lat='+e.latlng.lat+'&long='+e.latlng.lng+'&radius=30';

                $.getJSON(url, function (data) {

                    $.each(data.events, function(i, event){

                        var location = new L.LatLng(event.location.lat, event.location.lng);

                        var marker = new L.Marker(location);

                        marker.bindPopup('<div style="text-align: center; margin-left: auto; margin-right: auto;"><h3>' + event.name + '</h3> <p><a href="event.php?eid='+event.id+'">Event Link</a></p></div>', {maxWidth: '360'});

                        map.addLayer(marker);

                    });

                });

            }

           //Remake Map
            setTimeout(function(){ 
                    map.invalidateSize(); 
            }, 1); 
        });
        </script>


    </div>

Vielen Dank für jede Hilfe, die Sie geben können. Ich hab auch Probleme mit JSON geladen werden, auf der falschen Seite und das pageinit-event wird gefeuert zweimal, aber das ist eine andere Frage!

Sean