Setting a Google Map as the Background of your Web Site

So the other day I was Googling ways to “set a Google map as the background of your site” with little luck at all on finding a good solution. So I decided to create one using CSS properties and utilizing the z-index/absolute positioning of elements.

To get an idea of what I did, visit: http://wadehammes.com/dewey-beach/

Step 1 - Obtain a Google Maps API Key:

First off, you will want to make sure you have an API Key for the use of Google Maps. This is instantaneous (or it was for me) and is required per domain.

Step 2 - Setting up your CSS and HTML Documents:

In order to get this to work properly, we will be using the absolute property and z-index in order to align and position everything in the right order and to fit the screen.

Here is the HTML Document: http://cl.ly/5H4F

As you can see, in order to get this effect, I gave the id “map_canvas” (which generates the google map - see the Map JS file here) the inline style of absolute positioning with its top/right/left/bottom parameters all set to 0 and then also the z-index to 0. It IS necessary to position it in the BODY element as the VERY LAST element before the close body tag.

Here is the CSS Document: http://cl.ly/5CZv

For the other DIV elements on the page (the countdown, text, etc.) I created a container DIV (#countdown_dashboard) and gave it an absolute positioning and set the z-index to 100 (or higher, as long as its not 0).

There are obviously a lot of things that this could be made useful for, and this is only the very basic set up for the Google Map. The Google Map API will allow you to place custom markers on the map so this technique could be come useful when creating a company contact page and showing the locations of offices, etc.

If you utilize my set up on your site, I would love to see your implementation. Feel free to drop me a line at wade at wadehammes.com.

UPDATE: Per request, I will be updating this tutorial to Google Maps API V3 since V2 is deprecated (that word makes me laugh). I also have had a few say wouldn’t it make sense to use a static map…sure, if you want! I like it this way.

UPDATE 2: I am turning this into a webapp so anyone can create these (and in various styles, formats, etc.) It is going to be called countdwn.me and the beta will be launching at the end of the month!