I'm working on Django project w/ Bootstrap 3. The goal is to display a Google Map at full page width and height, beneath the nav bar. I'm able to do so on standard desktop viewports. On mobile screen widths, however, a grey area appears at the top and bottom of the map.
Desktop: http://screencast.com/t/3r0vBviNrK
Mobile: http://screencast.com/t/37YM8ifFdpw
I've set the parent div to 100% and tried using absolute positioning.
html + jQuery
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = {{ marker_list|safe }};
// Info Window Content
var infoWindowContent = [
{% for instance in queryset %}
['<div class="info_marker_content">' +
'<a href="{{ instance.get_absolute_url }}"><img src="{{ instance.thumb }}" height="80" width="80"></a>' +
'<h3><a class="location-font-map" href="{{ instance.get_absolute_url }}">{{ instance.location }}</a></h3>' +
'<p><a class="qnote-font" href="{{ instance.get_absolute_url }}">{{ instance.quick_note }}</a></p>' + '</div>'],
{% endfor %}
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
}
</script>
css
html, body {
overflow-x: hidden;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map_wrapper {
height: 100%;
width: 100%;
position: absolute !important;
}
#map_canvas {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: absolute !important;
}
Any ideas on a fix?
Make it easier. If the map is only you want show set #map_canvas
to position: fixed; top:0; bottom:0; left:0; right:0;
position: fixed; top:0; bottom:0; left:0; right:0;
That should do it.
Update .
To keep your bar on top, set top property to the height of your menu bar. Example: top: 20px;
Try replacing all width values with 100vw and all height values with 100vh.
(In place of 100%).
100vw = 100% of the viewport width 100 vh = 100% of theviewport height.
In jQuery Mobile, header and footer are the two standard types of toolbars which can be positioned in different ways as discussed in Toolbar positioning options .
For immersive interfaces like map viewer which requires to fill the entire screen with the the map itself, you can use Fullscreen fixed toolbars. To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.
Full screen fixed header markup example:
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed Header!</h1>
</div>
Full screen fixed footer markup example:
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>Fixed Footer!</h1>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.