Fun with Google Maps

Here’s the deal: I’m going to take a regular Google Maps iframe and stick it as the background of a webpage. You read that right. Then I’ll just put some dummy text and elements so you can get a better idea of what it’s going to feel like to use this in a real live project.

Demo

Demo first, code comes after that. Don’t forget to navigate through the examples.

Let’s get down to it then. The HTML is quite ordinary and I’ll only be showcasing the important bits:

1
2
3

<!-- The regular embed code that Google Maps spews out, sans the line break and small tag; also, added "gmap" id as hook -->
<iframe id="gmap" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Cluj-Napoca,+Cluj,+Romania&amp;aq=0&amp;oq=cluj&amp;sll=37.0625,-95.677068&amp;sspn=60.158465,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Cluj-Napoca,+Cluj+County,+Romania&amp;ll=46.777248,23.59989&amp;spn=0.206687,0.528374&amp;t=m&amp;z=12&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="425" height="350"></iframe>
<div id="container"><!-- Website stuff goes in here --></div>

The CSS, however is where most of the magic happens:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

body,
html{
height: 100%;
width: 100%; } /* If you don't do this, gremlins will eat your nose. */

#gmap{
height: 100%;
left: 0;
position: fixed !important; /* Acts in pretty much the same way as background-attachment: fixed for an image background. Has to be !important only if you're using the Google Maps API. */
top: 0;
width: 100%;
z-index: 1; } /* Has to be at least one increment smaller in value than the container's z-index */

#container{
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
border: 3px solid #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
margin: 0 auto;
overflow: visible !important; /* Has to be !important only if you're using an on/off switch */
padding: 40px;
position: relative;
top: 100px;
width: 800px;
z-index: 2; } /* Has to be at least one increment larger in value than the Google Maps iframe z-index */

And that’s about it. The demo pages show off two extra examples, one in which I used the Goole Maps API instead of the regular embed code and another one in which I added a small jQuery control to turn off the container which would allow users to take full advantage of the screen real estate to interact with the map.

A few caveats

The whole technique relies on setting the body and html elements to 100% width and height and a bit of z-index trickery.

If you’re using the Google Maps API, you need to call !important on your position:fixed because the good people at Google decided that if the map comes via their API, then it should have position: relative. I still can’t figure why they did that.

If you’re using an on/off switch, like I did in the third demo, the container will need to have an overflow: visible !important to avoid any clipping.

So…

This isn’t a revolutionary technique or anything groundbreaking, but it is a creative use of Google Maps and a fairly good way of getting a handle on what CSS positions do and how they do it.

Cheers, all!

Update

Isac Lagerblad caught an accessibility bug with one of the Google Maps demos, wherein the maps iframe should be loaded at the end of the document in order to prevent screenreaders from having to go through all the Google Maps tiles before getting to the actual content. Demo has now been updated, thanks Isac!