Tuesday, February 9th, 2010
Rotating maps with CSS3 and jQuery
One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too.
Whilst Google supports this in the satellite and hybrid maps, the basic ones still can’t be turned. Which is why I took CSS3 transformations (wrapped in a very useful jQuery plugin) and voila – rotating is possible:
Read more about the implementation and some of the things that need fixing in the original blog post about map rotation.
3.6 rating from 19 votes
The idea is cool, but moving doesn’t work correctly with a rotated map.
@HiveHicks: you can make moving/dragging work with a little more code with Google Maps API v3:
1a. capture ALL mouse movement:
{
if (window.Event)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getCursorXY;
}
1b: function getCursorXY(e)
{
mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
2. initialize the map with dragging=false
3. add map listeners for dragstart and drag
4. function dragstart()
{
dragX = mouseX;
dragY = mouseY;
}
5. function drag()
{
var dX = dragX-mouseX;
var dY = dragY-mouseY;
var rads = heading * Math.PI / 180;
map.panBy(dX*Math.cos(rads)+dY*Math.sin(rads), -dX*Math.sin(rads)+dY*Math.cos(rads));
dragX = mouseX;
dragY = mouseY;
}