Google Maps Sends the World into a Spin

Google Maps on your smart phone are able to rotate to point in the direction that you are facing. You might not think that there is much point in having this feature on the desktop but, with a little help from CSS3's transform: rotate() function it is possible.


Chris Heilmann has created his own Rotating Map Demo using CSS3 and jQuery.

Use the 'L' and 'R' keys to rotate the map. Also try and pan the map for a little added fun.

Chris has posted a brief explanation on his blog Wait Till I Come! that will help you if you would like to replicate this effect in your own maps.


Street View Fun by Lim Chee Aun is one example of why you might want to rotate a map on the browser. His application rotates a Google Map so that it faces the same direction as a Street View image. As you rotate the Street View in the demo the map rotates to face the same direction.

The map includes a nice rear view mirror option, which allows you to also see a Street View of what's behind you.


KVS have provided another example of why you might want to rotate a map. KVS needed to rotate Google Maps for design purposes.

On their website's home page they have a div that is rotated 45 degrees to provide a visually interesting diamond shape rather than a commonplace square. Because the holding div is rotated 45 degrees it is therefore necessary to counter-rotate the map 45 degrees so that it shows the right way up on the page.

The result makes for a striking map. I really like the use of a diamond shaped map marker as well.


Here's my own, slightly pointless, example. Right Way Up is for those of you who are tired of Google Maps being upside down. This map places south at the top of the map, where it truly belongs.

_________________