Sickdesigner.com

The work & fun of web designer Radu Chelariu.

Menu

Experiments, ideas & things done just for the fun of it

Contact me

Feel free to get in touch with me if you want to hire me (design work, speaking engagements, guest posting), interviews, if you have a problem with either Photoshop, HTML, CSS or Wordpress, or if you just want to talk about design. I'm also available on Twitter, Facebook or Google+, if that's more your game.

But, for the love of all that is Bauhaus, please do not contact me if you're selling something or about link exchanges and that kind of stuff. I will not reply to these requests.

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!

11 Comments so far

  1. Fernando Z says:

    Excellent technique. That could be combined with KML data and images?
    Thanks for sharing

  2. Couldn’t you do this a lot simpler by just using the Static Maps API? Then it’s one line in your CSS. (Of course, it isn’t interactive. ;)

  3. Terri says:

    This is a seriously cool “trick” and I just may have an appropriate use for it on an upcoming project :-) Hopefully, the whole world doesn’t start doing this or it will not be unique. Still, Good job and I hope you get tons of traffic on this one.

    • Thanks for the nice thoughts! I wouldn’t be too worried about it. It’s a nice technique, but nothing so earth shattering that suddenly everyone and their grandma will start doing.

  4. Jonathan says:

    Great work! Mind if we package this into a WordPress theme?

  5. NNM says:

    NOT working… Using firefox and I dont see anything.
    I don’t get it, skipping through demos, not seeing anything remotely close to a map.
    Another one of those “best viewed on MY computer”…

    • Considering that I didn’t use anything too modern for Firefox, I’ll take the wild guess that you’re using a [very] old version of Firefox. Maybe it would be time for you to update? ;)

  6. Matija says:

    I must say that your page is in my bookmarks from now on :)

Speak your mind