多个地图不适用于 jqueryMobile、phonegap 和 google 地图

Question

我正在使用 jQueryMobile alpha 3、最新的phonegap 和使用谷歌地图创建一个移动应用程序。地图用在三个地方。首先我可以改变我的位置。其次，我可以在地图上显示搜索结果。最后我可以在地图上查看单个结果的位置。当我单独使用它们时 - 一切正常。但是，当我尝试检查我的位置，然后尝试在地图上显示结果时，我收到以下视图：

http ://images.virtualdesign.pl/images/96594gmap.png

仍然可以很好地找到单个结果的位置。也从另一边去 - 首先在地图上显示结果，然后检查我的位置 - 结果是一样的。导航器或我的搜索引擎的位置是正确的，在 Firebug 地图中看起来也已正确初始化。有什么想法可能是错的吗？

<script type="text/javascript">
    var searchObjects = [],
    searchParameter = 0,
    states = {},
    localization;
    var mobi = $.mobile; 

    function onSuccess(position){
        localization = {'latitude': position.coords.latitude,
                        'longitude': position.coords.longitude };
        mobi.pageLoading(true);
        mobi.changePage('map.htm');
        return false;     
    }

    function onError(error) {
        mobi.pageLoading(true);
        alert('Unable to get location.');
    }  

    $('.page-link').live("click", function() {
        if (!!navigator.geolocation){
            mobi.pageLoading(false);
            navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 15000, enableHighAccuracy: true });
        }
    });

    $('.page-map').live("pagecreate", function() {
        if(localization){
            initialize(localization.latitude, localization.longitude, 0);
        }         
    });

    $('.page-map-results').live("pagecreate", function() {
        initializeResults(searchObjects);
    });

    function initialize(lat,lng, loc){      
        var latlng = new google.maps.LatLng(lat, lng),
        map1, myOptions,marker;

        myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        marker = new google.maps.Marker({
            position: latlng,
            map: map1
        });

        if(!loc){
            map1 = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }
        else{
            map1 = new google.maps.Map(document.getElementById("map_localization"),myOptions);
        } 

        marker.setMap(map1);
        return map1;
    }

    function initializeResults(data_map){

        var latlng = new google.maps.LatLng(51.961869,19.134521);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };              
        var map2 = new google.maps.Map(document.getElementById("map_canvas2"),myOptions);

        var icon1,     
        bounds = new google.maps.LatLngBounds(),
        maxlng = 0,
        maxlat = 0,
        minlng = 0,
        minlat = 0,
        positions = 0;

        icon1 = 'images/map_icon.png';     

        for(var i=0; i < data_map.length; i++){
            var pos_lat = parseFloat(data_map[i]['lat']);
            var pos_lon = parseFloat(data_map[i]['lon']);
            if(!isNaN(pos_lat) && !isNaN(pos_lon)){               
                positions = 1;
                addMarker(pos_lat, pos_lon, icon1);
                if(pos_lat < minlat || minlat==0){ 
                    minlat = pos_lat
                }
                if(pos_lat > maxlat || maxlat==0){ 
                    maxlat = pos_lat
                }
                if(pos_lon < minlng || minlng==0){
                    minlng = pos_lon
                }
                if(pos_lon > maxlng || maxlng==0){
                    maxlng = pos_lon
                }
                lat = minlat + (( maxlat - minlat)/2);
                lng = minlng + (( maxlng - minlng)/2);
                var allpoints = new google.maps.LatLng(pos_lat, pos_lon);
                bounds.extend(allpoints);
            }
        }     

        if(positions){
            map2.fitBounds(bounds);         
        }

        function addMarker(lat, lon, icon){
            var latlng = new google.maps.LatLng(lat, lon);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map2,
                icon: icon
            });            
            marker.setMap(map2);
        }
        return map2;
    }    
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">  </script>

以及两个地图的模板：

<div data-role="page" data-theme="a" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Gdzie jestem</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

<div data-role="page" data-theme="a" class="page-map-results" style="width:100%; height:100%;">
    <div data-role="header" class="header"><h1>Wyniki</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas2" style="width:100%; height:100%;"></div>
    </div>
</div>

快速浏览一下代码 - page-map 是使用 page-link 初始化的本地化地图。 page-map-results 是用于显示结果的第二个模板。如果 initialize 获取 loc 参数，它将显示第三个地图 - 单个结果的本地化。