Google map with several markers directly connected to an accordion menu?

615 Posts

Sylvaticus Reply #1, 13 years, 6 months ago

My goal:

- I want a document with a Google Map and a sidepanel with an accordion menu shown on a single page.
- The markers on the map get their lat/lng-data from TVs in a list of documents (children of the main map doc).
- The sidepanel-accordion-menu gets data from the same list of documents using getResources.
- When clicking a menu-element in the sidepanel two things should happen:
1. The accordion-element should open showing some data from the corresponding document, lets say [[+content]]
2. The corresponding marker-infobox on the map should open showing some data from the corresponding document, lets say [[+summary]].
- When clicking a marker on the map the same two things as above should happen.

Can someone please point me in the direction to go to solve this. Are there snippets/extras I should start with?

So far I have been looking at Gmaps, Gmap3 and some other great things, but I'm not there yet to be able to solve this task completely on my own.

Thanks.

I'm using Revolution, latest. [ed. note: Sylvaticus last edited this post 13 years, 6 months ago.]

I think, thererfor I am! But what I am, and why...?

615 Posts

Sylvaticus Reply #2, 13 years, 6 months ago

Got it fixed (almost) by use of jMapping: Examples » Example 3.

The only problem now is that the sidebar-menu only toggles, it won't accordion. If some of you have some time to look at the code and help me a bit on the way here I would be very glad

You can see it in action here: Tromsø Arctic-botanical garden (not styled yet).

(Later I'll try to get jMapping to work with the latest Jquery, but that has to wait.) [ed. note: Sylvaticus last edited this post 13 years, 6 months ago.]

I think, thererfor I am! But what I am, and why...?

2,310 Posts

bunk58 Reply #3, 13 years, 6 months ago

Try this around line 22, it slides up all open panels on click, before opening the individual panel :

  <script type="text/javascript">
        $(document).ready(function(){
            $("#map-side-bar .content-box").hide();
            $("#map-side-bar a").click(function(){
            $("#map-side-bar .content-box").slideUp("normal");
                $(this).next(".content-box").slideToggle("normal")
                .siblings(".content-box:visible").slideUp("normal");
                $(this).toggleClass("active");
                $(this).siblings("a").removeClass("active");
            });
        });
    </script>

615 Posts

Sylvaticus Reply #4, 13 years, 6 months ago

Fantastic! Thanks. It's almost midnight in Tromsø in Norway now, but to morrow I'll have a closer look to your code and find out the difference from mine. But it works!

I think, thererfor I am! But what I am, and why...?

2,310 Posts

bunk58 Reply #5, 13 years, 6 months ago

I just added :

$("#map-side-bar .content-box").slideUp("normal");

as the first line of the .click function