Google Maps API Tutorial

Translate this page:

Lots of sidebar entries

If you've got lots of sidebar entries, then a simple sidebar can end up being much longer than the height of the screen.

Here are four ways of handling the situation:

1. Sidebar with a scroll bar

Simply add "overflow:auto;" to the sidebar <div>, and specify a height for it.

example.

2. Multiple sidebars (a)

Create several sidebar divs in your HTML, and then use the modulus operator "%" to decide which sidebar to use for each entry.

example.

3. Multiple sidebars (b)

If your data is sorted into a useful order, you might prefer the data to be arranged vertically. You can distribute the entries into three vertical columns by dividing the entry number by a third of the total number of markers. You need to take a bit of care with Math.ceil() and Math.floor() to avoid the possibility of the final marker being placed in the next column.

example.

4. Select box

Instead of a sidebar, you can use a <select> box.

The action is then controlled by an "onChange" event on the <select> element, rather than an "onClick" event on each individual entry.

To obtain the marker number from the "onChange" event use the .selectedIndex property of the <select> box.

I like to have a dummy <option> in my <select> boxes that tells the user what to do, and I arrange for this to be treated differently in the onChange handler.

example.

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