下の写真でわかるように、マップは左上隅にしか表示されません。画面全体をドラッグすることは可能ですが、その正方形に戻ってそこにしか表示されません。
タイトルに記載されているプラグイン: SemiOfficial jquery plugin
だから私はこれをどのように修正できるのだろうか？
写真の下に、私の html、プラグインのリスト、および js コードがあります。
HTML/JSP: (これは私のアプリの 2 番目の .jsp であるため、pageinit メソッドで初期化する必要があります)
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>Header</p>
</div><!-- /header -->
<div data-role="content" id="content" name="content">
<div id="map_canvas" style="width:300px;height:350px"></div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
プラグイン:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=_MY_KEY__INSERT_HERE_&sensor=true">
</script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/FileManager.js"></script>
<script type="text/javascript" src="js/LocalAction.js"></script>
<script type="text/javascript" src="js/Menu.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/PageHeader.js"></script>
<script type="text/javascript" src="js/Mapmode.js"></script>
Mapmode.js:
var mapdata = {
destination: new google.maps.LatLng(59.3327881, 18.064488100000062)
};
$(document).on("pageinit", "#mapmode", function(event) {
initMapMode();
document.getElementById("map_canvas").style.height=$(window).height();
document.getElementById("map_canvas").style.width=$(window).width();
//Create the map then make 'displayDirections' request
$('#map_canvas').gmap({
'center' : mapdata.destination,
'mapTypeControl' : true,
'navigationControl' : true,
'navigationControlOptions' : {
'position':google.maps.ControlPosition.LEFT_TOP
}
})
.bind('init', function() {
$('.refresh').trigger('tap');
});
});
$('#mapmode').on("pageshow", function() {
$('#map_canvas').gmap('refresh');
});
function initMapMode(){
initPageHeader();
initMapModeContent();
}
function initMapModeContent(){
}
function fadingMsg (locMsg) {
$("<div class='ui-overlay-shadow ui-body-e ui-corner-all fading-msg'>" + locMsg + "</div>")
.css({
"display": "block",
"opacity": 0.9,
"top": $(window).scrollTop() + 100
})
.appendTo( $.mobile.pageContainer )
.delay( 2200 )
.fadeOut( 1000, function(){
$(this).remove();
});
}
// Request display of directions, requires jquery.ui.map.services.js
var toggleval = true; // used for test case: static locations
$('.refresh').live("tap", function() {
// START: Tracking location with test lat/long coordinates
// Toggle between two origins to test refresh, force new route to be calculated
var position = {};
if (toggleval) {
toggleval = false;
position = {
coords: {
latitude: 57.6969943,
longitude: 11.9865
}
}; // Gothenburg
} else {
toggleval = true;
position = {
coords: {
latitude: 58.5365967,
longitude: 15.0373319
}
}; // Motala
}
$('#map_canvas').gmap('displayDirections',
{
'origin' : new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
'destination' : mapdata.destination,
'travelMode' : google.maps.DirectionsTravelMode.DRIVING
},
{
'panel' : document.getElementById('dir_panel')
},
function (result, status) {
if (status === 'OK') {
var center = result.routes[0].bounds.getCenter();
$('#map_canvas').gmap('option', 'center', center);
$('#map_canvas').gmap('refresh');
} else {
alert('Unable to get route');
}
});
// END: Tracking location with test lat/long coordinates
$(this).removeClass($.mobile.activeBtnClass);
return false;
});
initpageheader 関数:
function initPageHeader(){
//TODO getdata with the id(page we are currently on).
$("#header").html(function(index, originalMarkup) {
return '<a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" '+
'data-corners="true" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all" href="#" '+
'data-rel="back" data-role="button"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">'+
'<img src="../images/back.png" alt="back" align="middle" vspace="2"></span></span></a>'+
'<h1 aria-level="1" role="heading" class="ui-title">'+
'<img src="../images/main_header.png" alt="logo" align="middle" vspace="2">'+
'</h1><a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true"'+
'data-corners="true" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-inline ui-shadow ui-btn-corner-all" '+
'href="#first" data-role="button" data-inline="true"><span class="ui-btn-inner ui-btn-corner-all">'+
'<span class="ui-btn-text">'+
'<img src="../images/home.png" alt="picture to take you to the first page" align="middle">'+
'</span></span></a>';
});
}