Thursday, December 22, 2011

How to Fold a Google Map


Folded Google Maps is an experimental folded map effect given to Google Maps using webkit's CSS 3D Transforms and some jQuery. Whilst the screenshot above looks impressive you should check out the map in a Chrome browser as the map also includes an animation that actually unfolds the map.

If you want to know how the folded map look was achieved there is a bit of an explanation (in Dutch) here.

Another example of a Google Map with a folded paper look can be found on the Ubilabs website.


The screenshot above really doesn't do the Ubilabs - Contact Map justice. Providing a contacts map, showing the location of your business on Google Maps, is a great idea. An even better idea is to make you map stand out by giving it some visual appeal.

Ubilabs achieved this by creating a Google Map that replicates the look of a paper map.

One more good example of a Google Map given a folded paper map look can be seen at Google Maps - Realistic Look. If you want to create your own realistic look then check out this tutorial on how to create your own 'realistic' map with a little bit of image masking - Add a Touch of Realism to Your Google Maps.

1 comment: