I have the same code for my footer in all sub pages. In this particular one, I have a map. The footer is located at the bottom of all pages except this one. I noticed that of I zoom out in my browser, it will go to the bottom. Otherwise, it is located on the map. I already tested the answer here How do you get the footer to stay at the bottom of a Web page? but it just changed the position of footer and it is still in the middle of the map.
<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
#map {
height: 250px;
width: 30%;
}
</style>
</head>
<body>
<nav class="topnav">
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="awards.html">Awards</a>
<a href="teaching.html">Teaching</a>
<a class="active" href="contact.html">Contact</a>
</nav>
<br>
<h3>Address</h3>
<p>1750 cyg Hwy </p>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat:33333, lng: -33333};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyALqA8E2Iu2s_fRkVcsUG__-3333fQEOCE &callback=initMap">
</script>
<footer class="footer">
©copyright </footer>
</body>
</html>