Wednesday, June 13, 2007

Continuous zoom

In the previous post I have been talking about this continuous zoom function of the Google Map API. I did not find a lot of information about animated/continuous zoom, thus I decided to share the code I wrote.

First of all, this seems to look best in IE. In IE the animation looks very smooth, other i browser tend to flicker while zooming in. Anyways this is a quite new feature and I assume it will be improved in the future.

A good resource to start with things is the Class Reference and an insider tip it this Unofficial Reference. I assume you already know how to get started, otherwise this tutorial can help. I omit the code around and just post my essential function:

function load() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
map.setMapType(G_NORMAL_MAP);
map.enableDoubleClickZoom();
map.enableContinuousZoom();

var point = new GLatLng(47.5,8.75);
var marker1 = new GMarker(point);

map.addOverlay(marker1);

window.setTimeout(function() {
map.panTo(new GLatLng(47.5,8.75));
}, 1000);

for (var i = 1500; i < 4500; i = i + 500) {
window.setTimeout(function() {
map.zoomIn(new GLatLng(47.5,8.75), false, true);
}, i);
}

}
}

The map.enableDoubleClickZoom(); is very important, otherwise the zooming won't be smooth at all. The call to map.zoomIn(...) triggers a one step zoom and the loop around it is where the real magic happens. With the 500ms delay between the calls we can fake some kind of continuous animated zoom in. I am not sure about the 500ms, you may want to play around with this value. Please post a comment in case you figure out a more adequate setting.

2 comments:

Unknown said...
This comment has been removed by the author.
Unknown said...

There is now a function in MAP API that you can use. Just add the line:

map.enableContinuousZoom();