A separate SidebarItem() constructor was written. It creates a button element and appends that to a div with id="sidebar" by default. makeMarker() calls the constructor if you have set an option property {sidebarItem: "My label"}
The basic button element needs some CSS cure. You can also style individual sidebar items by setting different CSS class names for them. {sidebarItemClassName: "important_item"}
The events are set to work bidirectionally.
- click on sidebar -> click on marker
- select on sidebar -> click on marker (select by [Tab])
- click on marker -> focus on sidebar
- mouseover on sidebar -> mouseover on marker
- mouseout on sidebar -> mouseout on marker
Also you can use :hover and :focus CSS pseudoselectors. (:focus does not work with IE)
SidebarItem() instance has methods addIn() and remove(). We need addIn() to decide where to add the item. That helps to implement the categories.
12 comments:
Very nice,
It should be more feasable when the sidebar own a scrollbar when it is longer than the screenheigth.
Another whisable thing is to obtain a setup who fills the available screen. Thus a the left a eventually scrollable sidebar and the map filling the righter part.
I tried it with parameters, but it doesn't work. I loses the map.
Someone know how to do it ?
I will prepare an example soonest.
Fullscreen example is now online
It is based on absolute positioning and setting all the four position attributes: top, right, bottom and left.
Is not working in IE
Works fine under FF
Sorry, I forgot
html, body {height:100%;}
Fixed now.
Hi,
I tried your code and in FF it works fine. However, in IE it doesn't ...
Here is the code
(download please because it is not accepted)
http://www;fotospotter.be/download/test1.txt and rename it to test1.html
thks
IE7 and IE8 seem to be doctype dependent and IE6 doesn't support 'right' and 'bottom' dimensioning at all.
I ended up using separate CSS for IE wrapped in conditional comments.
The example page is updated now.
Can you tell me how I can remove the content of the sidebar?
I'm refreshing the content of the map without any problem (removing all the markers) and reloading them again. But the sidebar is another story for me.
Albert
Esa,
makeMarker has saved me a ton of time. I've modified it some for my needs, but it looks like it adds each item to the DOM independently. I've tried and failed so far to collect the DOM fragments and append them when the loop is finished. Have you thought about using a similiar approach?
Hi!
I'm using this code and it works perfectly! I just have an issue: is there any way to change sidebar buttons to links? It would be easier to style with CSS...
Thank you! :)
How would you organise your marker and categorized your sidebar e.g. almost like an accordion menu where marker 1, 2 and 3 will go under sidebar heading/button one and marker 4,5 will go under sidebar button/heading two. etc.
I am looking to adapt your v2 - http://mapsapi.googlepages.com/categories.htm
- have you updated this format to v3 - I very much like the format with the categories on the left - centered map and the information (novel) on the right - a very attractive format.
Post a Comment