thoughts

Dissecting zoom methods

Suppose I have a working Google Maps implementation with smooth scrolling enabled. See for instance this example. Now make sure you have Firebugs console before you.

We start investigating what the zoomIn and zoomOut methods are about, type:

map.zoomIn.toSource();
map.zoomOut.toSource();

What you get back is the following:

"(function (a, b, c) {if (this.Ef && c) {this.ak(1, true, a, b);} else {this.sp(1, true, a, b);}})"
"(function (a, b) {if (this.Ef && b) {this.ak(-1, true, a, false);} else {this.sp(-1, true, a, false);}})"

I noticed the exact function names might vary with different implementations, so be sure you check yours. It's not hard to imagine the ak method does the smooth zooming and the sp method does the regular zooming. The Ef variable holds a boolean indicating wether smooth zooming is enabled or not. Now let's dig into that ak method. What are its arguments? To be specific: what is the a (the third) argument? Enter the following in the Firebug console:

z = map.ak;
map.ak = function(){console.log(arguments); z.apply(this,arguments);}

Now zoom in or out with your scrollwheel and watch the console window.

That's coordinates, or more specific, the coordinates of the zooming center, which is the place that stays stationary while zooming. Its where the mouse is.

Playing around

Play around with this, you can directly call the ak method from within the console, try for instance:

map.ak(1,true,map.getCenter(),false);

Or zoom in more levels at once:

map.ak(5,true,map.getCenter(),false);

Zoom out around the northeast corner:

map.ak(-5,true,map.getBounds().getNorthEast(),false);

Now try setting the last parameter to true, watch what happens.

Got that? instead of zooming in or out around the given coordinates, it zooms so that the given coordinates end up in the center of the map. Pretty cool huh?

Lastly, there is the second boolean parameter. Setting that one to false only resulted in zooming out to the entire world. No idea what that is about, so just leave it true or tell me what is actually is.

The smoothZoomTo method

Here is some code I wrote to smoothly zoom in such a way that a given point is centered and at the given zoomlevel:

map.smoothZoomTo = function(targetCenter,targetZoom,callBack) {
	var currentZoom = this.getZoom();
	var zoomAmount = targetZoom-currentZoom;
	
	if (!this.Ef) {
		this.setZoom(targetZoom);
		this.setCenter(targetCenter);
		if (callBack) {
			callBack.apply(this);
		}
		return;
	}
	
	if (zoomAmount===0) {
		if (callBack) {
			callBack.apply(this);
		}
	} else {
		this.ak(zoomAmount,true,targetCenter,true);
		if (callBack) {
			var zoomEnd = GEvent.addListener(this,'zoomend',function() {
				callBack.apply(this);
				GEvent.removeListener(zoomEnd);
			});
		}
	}
};

Remember the name of the Ef and ak members may vary!