Menu
The following code displays strange output. I should see a full screen mobile map. But for some reason it shows on just a portion of the screen. I am using jquery.ui.map for mapping.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="map_canvas" name="contentMain">
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#map_canvas').gmap().bind('init', function() {
// This URL won't work on your localhost, so you need to change it
// see http://en.wikipedia.org/wiki/Same_origin_policy
$.getJSON( 'http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) {
$.each( data.markers, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
</script>
</body>
</html>
Output:
Thanks in advance.
927
The solution for my mobile website was to set styles position:absolute; width:100%; height:100%; for the canvas div. You can use the top and bottom styles to leave space for toolbars.
137
Header and footer are unavoidable if you're using jQuery. I set {data-position="fixed" data-fullscreen="true"} for both header and footer, and set html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } as well, so that both the menu and the map perfectly work together on the mobile device.
36
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
