Saturday, December 03, 2011

The Paper Looking Google Map

Iacopo Boccalari has created a very beautiful paper map styled Google Map.

On my first look at Google Maps - Realistic Look I imagined Iacopo must have put together some complicated css styles for the border and then created some z-index layers with different opacities to show the map.

However, if you look at the html, you will see that the page has been put together very elegantly and with minimal complication. The web page uses just one image file to mask the map (presumably with transparent sections where the Google Map can be viewed through the mask).


Sepp said...

I think the trick is to use the "pointer-events: none;" CSS command.

So you can put a div (with the image-mask) in front of the map and all mouse events still go through to the map.

Unfortunately it does not work in IE9 and Opera :/

Ant said...

They should let you enter an URL of any where!