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. |