As you see on the below picture, the map only shows up in upper left corner, It is possible to drag it around on the whole screen, but it will jump back to that square and only be displayed there.
The plugin mentioned in Title: SemiOfficial jquery plugin
So I’m wondering how I can fix this?
Below the picture You’ll find my html, a list of plugins, and the js code.
HTML/JSP: (Should be mentioned this is the 2nd .jsp in my app, so it should hopefully initialize in the pageinit method)
<!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>
PLUGINS:
<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:
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>';
});
}
On the container that is holding the google map.
#map_canvas { max-width: none; }