Mantis and Jessamine

Adding Dynamic Behavior When Using TabbedMaxContent

Last time I promised a continuation of the series describing how I used the Tabbed Max Content JavaScript class for some Google Maps at ECU. One of the inspirations I used was the many examples in the Google Maps API Demo Gallery. Specifically, I used code snippets from the Tabbed Max InfoWindow + Dynamic Content example. Thanks to Nianwei Liu for the Tabbed Max InfoWindow example posted there.

The simple example from my last posting didn’t need any dynamic actions; all of the rendering was handled by the Tabbed Max Content itself. If the contents of the Tabbed Max Content may change, though, we need additional actions.

GEvent.addListener(map.getTabbedMaxContent(), 'selecttab', function(tab) {
   switch (tab.getLabel()) {
      case 'Availability':
         // Generate the dynamic HTML as strings
         // Set the html content  of the div, p, or other block element to be that string
      break;
   }
});

In the code above we have the outline of our basic tab selection event listener. The method that will fire is selecttab, generated by the map’s current Tabbed Max Content instance. We only have to do this once in the entire map, not once per marker.

I have created a simple example that generates a random value and sets the image data for a Google chart to graph the value:

http://www.carolinamantis.com/demo/tabbedmaxcontent/ex02.html

My example adds this block of code for the dynamic aspect:

GEvent.addListener(map.getTabbedMaxContent(), 'selecttab', function(tab) {
   switch (tab.getLabel()) {
      // We could also have used case 1 below (tabs are numbered from 0 and increase as they go left to right)
      // Here I choose to switch on the actual text of the tab, note it is enclosed in quotes but the numeric 1
     // is not.
     case 'Tab 2':
        // Everything needed for a Google chart but the final value
        var url = 'http://chart.apis.google.com/chart?chs=170x170&chtt=Power%20Reading&cht=gom&chd=t:';
        // Generate a random number between 0 and 100
       var randomnumber=Math.floor(Math.random()*101);
       url += randomnumber;
       var htmlsrc = '';
       // Use jQuery to set the HTML for the paragraph.
       $('#tab2image').html(htmlsrc);
    break;
    }
});			

If you visit the example page, you can click on the point and then expand the Tabbed Max Content. Every time you switch between Tab 1 and Tab 2, a new random value will be generated and the graphic will be updated.

Next time I will post about how to manage the case where you have many points on your map, and must generate separate dynamic content on a tab for each one.