Google Maps API Tutorial© 2006, 2007, 2008, 2009 Mike Williams
|Translate this page:|
Lots of sidebar entriesIf 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 barSimply add "overflow:auto;" to the sidebar <div>, and specify a height for it.
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.
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.
4. Select boxInstead 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.