Javascript 重新访问页面时，在Jqm/Cordova/Android页面上显示谷歌地图部分地图

我正在尝试构建一个支持谷歌地图的Jqm/Cordova/Android应用程序。我使用jQueryMapUI在listview中使用通过URL链接传递的变量来显示地图。当我第一次访问页面时，它会正确显示地图，但当我再次访问页面时，它会显示地图的一部分

index.html>branch_locator.html显示一个列表视图，其中包含map.html的4个URL参数

map.html：

重访map.html：

下面是map.html的代码示例：

<div data-role="page" data-theme="f" id="Gomap" style="width:100%; height:100%;">

<div role="banner" class="ui-bar-a ui-header" data-role="header" data-position="fixed" data-tap-    toggle="false">
<a data-transition="slide" data-theme="f" href="branch_locator.html"  data-rel="back" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l">
                      <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">
                          Back
                        </span>
                        <span class="ui-icon ui-icon-arrow-l ui-icon-shadow">
                        </span>
                      </span>
                    </a>
                    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">
                      Google Map
                    </h1>

                </div>

                <div data-role="content" style="width:100%; height:100%; padding:0;">

                    <div id="map_canvas" style="height:100%;"></div>

                    Loading map....

                </div>

                <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="foot">

                  <h4>
                    Developed by Md. Thuhidul Islam Khan
                  </h4>

                </div>
                <!-- /footer -->

<script type="text/javascript" src="js/map.js"></script>

</div>

map.js代码：

var latt1;

var longg1;

var latt2;

var longg2;

$("#Gomap").on("pageshow", function(e) {

var s = $(this).data("url");

var lat1Part = s.split("&")[0];

var long1Part = s.split("&")[1];

var lat2Part = s.split("&")[2];

var long2Part = s.split("&")[3];

latt1 = lat1Part.split("=")[1];

longg1 = long1Part.split("=")[1];

latt2 = lat2Part.split("=")[1];

longg2 = long2Part.split("=")[1];


});


loadScript();

function initialize() {


$('#map_canvas').empty();

var ur_pos = new google.maps.LatLng(latt1, longg1);

var br_pos = new google.maps.LatLng(latt2, longg2);

$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});

$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>This is a AIBL Branch</B>'
}, this);

});

$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);

});

$('#map_canvas').gmap('refresh');
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=Google Map Key&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}

---

我需要帮助来解决这个问题。有关更多代码示例，请询问。

放入加载脚本；在$Gomap.onpageshow中，function{}

这对我来说很有用，但是在页脚部分下面的地图你可以在我的问题部分看到map.html的图片，你能帮我解决这个问题吗？我已经解决了css的问题，我使用下面的css在地图的画布上打洞。地图{位置：绝对！重要；顶部：40px！重要；底部：40px！重要；左侧：20px！重要；右侧：20px！重要；}这条路对吗。。

var latt1;

var longg1;

var latt2;

var longg2;

$("#Gomap").on("pageshow", function(e) {

var s = $(this).data("url");

var lat1Part = s.split("&")[0];

var long1Part = s.split("&")[1];

var lat2Part = s.split("&")[2];

var long2Part = s.split("&")[3];

latt1 = lat1Part.split("=")[1];

longg1 = long1Part.split("=")[1];

latt2 = lat2Part.split("=")[1];

longg2 = long2Part.split("=")[1];


});


loadScript();

function initialize() {


$('#map_canvas').empty();

var ur_pos = new google.maps.LatLng(latt1, longg1);

var br_pos = new google.maps.LatLng(latt2, longg2);

$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});

$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>This is a AIBL Branch</B>'
}, this);

});

$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {

$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);

});

$('#map_canvas').gmap('refresh');
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=Google Map Key&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}