This is meant to be a quick tutorial on how to make a full screen Google map as the background to your site. It will only touch on the Google Map API as there is so much more features/options that I won’t get into here, if you’d like a more in-depth tutorial on Google Maps API let me know in the comments and I’ll set one up in the future.
In the code example I am not going to break up the CSS or JS into separate files just for ease of the tutorial, use your ninja skills to figure out how to break it up and use the code properly on your site.
Let’s start with building the HTML document:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css"><!--
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #mapbg { height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;} #wrapper { height:100%; width: 960px; background-color: #FFF; position:absolute; left: 50%; margin-left: -480px; z-index:1;}
--></style>
As you can see there is one js file required from Google Maps API. The CSS is pretty basic with two id selectors (#wrapper and #mapbg), using ‘position:fixed;’ and ‘position:absolute;’ it will allow you to use ‘z-index’ properly. Next up the body:
<div id="wrapper">Your page content here!</div>
<div id="mapbg"></div>
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("mapbg"),
{
center: new google.maps.LatLng(55.3, -97),
zoom: 4,
scrollwheel: false,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
}
</script>
<script type="text/javascript">window.onload.load();</script>
As you can see I did not put much in the #wrapper div but this is where your normal page content will go (header, nav, articles, footer etc), then after the #wrapper div we have the #mapbg div which will hold the map itself. The Javascript is setting up the map with some basic options, check out the Google Maps API for reference on what some of these options are and how to add more.
That’s it! The important thing here is the ‘postiton’ and ‘z-index’ options in the CSS, with out those set properly the wrapper will be above the map instead of on top.