Google Maps as background

Question

Is there a sexy way to get a web page with Google Maps (in fullscreen), and just a small div#header on the top and a small div#container on the middle?

I had make some research and I had found this example: http://koti.mbnet.fi/ojalesa/exam/index.html ... but this is not exactly what I would like to do.

If you have a thin code example of a nice website example, this would help me a lot.

Many Thanks.

Answer 1

You can position HTML elements randomly on top of a (HTML based) Google Map using position: absolute or position: fixed. You just need to give them a z-index higher than that of any element in the Google map.

Untested but something along these lines should work:

<style type="text/css">
  .Overlay { position: absolute; left: 0px; top: 0px; 
             right: 0px; height: 50px; background-color: white; z-index: 100 }
</style>

... Fullscreen Google Map (or whatever)..... 

<div class="Overlay">I'm on top of a Google Map!</div>

Answer 2

If you hold the iframe for Google maps in a div with position: relative, and make the div the same dimensions as the iframe, you can then use position: absolute on other elements within the relatively positioned div to overlay them where you want on the GMap. You may need to tinker with the z-index css property of the content you wish to position over GMap.

Answer 3

Here's a nice writeup of how it's done:

http://blog.wadehammes.com/post/3837158298