Menu
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>';
});
}
251
In the below example, applying style="height: 100%;" to the body and html makes google maps full height because the div the map loads in to is a child of body . In your case, you need to add style="height: 100%;" to the relevant parent elements of #map .
jQuery Google Map is a jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.
Go full screenHit CTRL-Shift and F on a PC or CMD-Shift and F on a Mac. Google Street View should fill your monitor at the maximum possible size — and if you've followed the instructions above there'll be no buttons, overlays or widgets either.
try to refresh the frame of the map with api function
after this line
$('#map_canvas').gmap('refresh');
try this
google.maps.event.trigger(map, "resize");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With