Sidebar and tabbed info windows using google maps v2

Question

Does anyone know of an example where a Google Map is used to create a map with both a sidebar

http://econym.org.uk/gmap/example_map4c.htm

and tabbed info windows

http://econym.org.uk/gmap/example_map10a.htm?

The markers are defined and ready for sidebar

      function createMarker(point,name,html) {
        var marker = new GMarker(point,{icon:myIcon});

        // add a line to the side_bar html
        side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br><\/div>';
        return marker;
      }

The sidebar gets its titles from the 'name' defined for the marker :

var marker = createMarker(point,"Point Title", 'Point Content')
map.addOverlay(marker); 

Tabs are generated by passing the markers into arrays :

      function createTabbedMarker(point,htmls,labels) {
        var marker = new GMarker(point);

and

   var marker = createTabbedMarker(point, ["Tab 1 contents", "Tab 2 contents","Tab 3 contents","Tab 4 contents"],["One","Two","Three","Four"]);
      map.addOverlay(marker);

My question is how can I grab just the first part of the array [labels], in this example 'One', and have that be what the output is for the sidebar ?

Answer 1

The sidebar in the first example is not a feature of the Google Maps API; i's just a table cell which is updated in Javascript.

Answer 2

It is doable ... if you check the Google Maps documentation on Gmarker, or more specifically Gmarker.openInfoWindowTabsHtml, you will see that it takes two arguments:

1. An array of GInfoWindowTab's
2. A GInfoWindowOptions javascript object.

In the documentation for GInfoWindowOptions you will see that you can pass in the tab index via the selectedTab property. In that case, we can use the code from the sidebar example and simply update the myclick function:

function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

becomes:

function myclick(i, tab_index) {
        gmarkers[i].openInfoWindowHtml(htmls[i], { selectedTab : tab_index });
      }

And we update the createMarker function to accept the number of tabs this marker should have:

createMarker(point,name,html,tab_count) {
    // ...snip ...
    var links_html_temp = "";
    while (--tab_count) {
         links_html_temp = '<a href="javascript:myclick(' + i + ',' + tab_count + ')">' + name + ': Tab #' + tab_count + '<\/a><br>' + links_html_temp;
    }
    side_bar_html += links_html_temp;

I'll leave it to your own specific implementation to pass the appropriate tab count to createMarker.