I'm trying to make a full page Google maps page with a footer that is always on the bottom.
I am using a tab styled page as a link to other content and the map is on the last tab. If I place the code above all the tabs it works perfectly. It's just when inside the tabs it doesn't show.
Currently the way I keep the footer on the bottom is by using:
.pagewrap {
height: 100%;
margin-bottom: -58px;
}
.pagewrap:after {
content: "";
display: block;
}
.footer {
height: 58px;
}
So the footer stays at the bottom all the time.
This is the code I am using for the pages:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation.css" />
<style>
#map-canvas {
height: 100%;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="js/vendor/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="pagewrap">
<div class="row">
<div class="large-12 columns">
<div class="tabs-content">
<div class="content active" id="panel2-1">
<div class="panel" style="border:none;">
<h3>Page title 1</h3>
</div>
</div>
<div class="content" id="panel2-2">
<div class="panel" style="border:none;">
<h3>Page title 2</h3>
</div>
<dl class="accordion" data-accordion>
<dd>
<a href="#panel1">Demo accordian</a>
<div id="panel1" class="content">
Content for the first task lalalalala
</div>
</dd>
<dd>
<a href="#panel2">Demo accordian</a>
<div id="panel2" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel3">Demo accordian</a>
<div id="panel3" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel4">Demo accordian</a>
<div id="panel4" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel5">Demo accordian</a>
<div id="panel5" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
</div>
<div class="content" id="panel2-3">
<div class="panel" style="border:none;">
<h3>Page title</h3>
</div>
</div>
<div class="content" id="panel2-4">
<div class="panel" style="border:none;">
<h3>PAge title</h3>
</div>
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1"><img src="img/home.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-2"><img src="img/file.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-3"><img src="img/camera.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-4"><img src="img/location.png" class="footer-icon"></a></dd>
</dl>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Any ideas?
