CODEWITHSUNDEEP
htmlcsscss-position
AaronUponEarth
AaronUponEarth

Reputation: 33

Full Screen Google Maps Background div with CSS

I trying to use a Google Map as a full screen background to a web app I am developing. I have used a div to hold the map and so far I cannot seem to find a method to effectively make it full screen.

When using absolute positioning, I can get it to fill the browser window, however if there are scroll bars on the page, and I scroll down, the background does not fill the remaining space below the browser window.

I have also tried using fixed positioning but that doesn't seem to work either. It pushes the rest of the content under the background unless I wrap it all and position it absolutely over the top, but that still doesn't fix the scroll problem.

This is an idea of how I have it at the moment:

<body>
    <div id="background"></div>
    <div id="wrapper" class="grid-container">
        <!-- Content -->
    </div>
    <footer>
        <!-- Footer -->
    </footer>
</body>

And the CSS:

#background {
    position:absolute;
    width:100%;
    min-height:100%;
    top:0px;
    left:0px;
    z-index:-1;
}

The reason I have the footer outside of the wrapper div is because I am using a sticky footer (http://www.cssstickyfooter.com/) and I am using a responsive grid system called Unsemantic (http://unsemantic.com/).

Any help would be greatly appreciated! Thanks, Aaron

Upvotes: 0

Views: 8178

Answers (1)

Rodrigo Zuluaga
Rodrigo Zuluaga

Reputation: 497

You got to wrap the map in a div, and call the script the the header calling the div name class or ID. give the div 100% width and a height in css. if you want the exact window height call a jquery

$(document).ready(function(e) {
        var hheight = $(window).height();
        $('#map_canvas').css('height', hheight);
        $(window).resize(function(){
            var hheight = $(window).height();
            $('#map_canvas').css('height', hheight);
        });
    });

<html>
  <head>
    <style>
      #map_canvas {
        width: 100%;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Upvotes: 1

Related Questions