Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

Translate this page:


A Custom Slider

Writing a custom slider isn't particularly easy. I'm not going to go through the code in detail. I'll just give you two versions of some example code that have lots of comments, and point out some of the interesting points.

Here's an example that doesn't work correctly in MSIE6.

Here's an example that works correctly, but is a little less readable.

The code is the same apart from the extra code to pass transparent PNG files to the AlphaImageLoader. If you're using GIFs, JPEGs or PNGs without transparency then use the first version.

The Javascript that drives the slider is here and here.

Points of Interest

In the GEvent callback functions, the "this" isn't a reference to our GControl, but we do need such a reference. We could set up a global variable to hold the reference, but then things would go wrong if we had two maps using the same slider code on the same web page. My solution is to store a reference to the "this" in a local variable on which we obtain Function Closure.

When the zoom level is changed by other code, we have to move the contents of the GDraggableObject by setting its, and we also need to set the .top property of the GDraggableObject itself, so that the API knows about the new position.

When the user moves the slider, YSliderControl.setZoom() changes the zoom level of the map. This then triggers a zoomend event, which then triggers YSliderControl.setSlider(). I hadn't really indended for that to happen, but it actually turns out nice, because if the user moves the slider to an inermediate position, the .setSlider() call causes the slider to snap to the exact position that represents the selected zoom level.

The slider movement performed by .setSlider() doesn't trigger a dragend event on the GDraggableObject, so we don't get into a loop.

Back to Mike's Homepage
Up to the start of this tutorial