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.

Using TabbedMaxContent with Google Maps

While working on a project to show general purpose computer labs at East Carolina University, I needed to combine several techniques, libraries and technologies.  This post is about my experience with the TabbedMaxContent JavaScript class from the gmaps utility library.

The examples and API reference certainly helped, but it took more effort to figure out how to handle some of the dynamic interactions needed in our lab map.  The big challenge was separating the functionality to display the “static” information in the tabs from the dynamic information.

Whenever I’m putting together a project like the lab map, I like to create bite sized examples of the parts working independently. Then combining the techniques prevents trying to debug everything all at once. With that in mind, I wanted my own example of a Google Map with a single marker point using a TabbedMaxContent. I have put together a simple example at http://www.carolinamantis.com/demo/tabbedmaxcontent/ex01.html

The beginning of this code uses the Google loader to load both jQuery and the Google Maps API. Why use your own bandwidth (and your users) when they can use a previously cached copy?

	google.load("maps", "2");
	google.load("jquery", "1.3.2");

Note that where I have PUTYOURMAPKEYHERE you need to use the Google Maps key generated for the domain/IP address you’re using to host the map. If you only want the Google AJAX Library APIs and no map, then you can leave the query string (including question mark) out of the URL.

You also need to include the source for the TabbedMaxContent class. I put mine in my document root, but please host your own if you are going to use it.

Continuing on, we have the meat of the TabbedMaxContent and Gmarker creation:

			tab1html = '
This is the first tab.  You have few limits to the HTML that may be put here
';
			tab1 = new MaxContentTab('Tab 1', tab1html);
			tabs.push(tab1);
			
			tab2html = '
This is the second tab.  Here is a fixed Google Chart to give an example of interesting content
';
			tab2 = new MaxContentTab('Tab 2', tab2html);
			tabs.push(tab2);
			
			// HTML for minimized and maximized state of the TabbedMaxContent window
			regularInfo = '
more information ... ';
       		summaryInfo = 'less information ... ';

			
			// Add a listener for the click event on the marker itself
			GEvent.addListener(marker, "click", function() {
								marker.openMaxContentTabsHtml(map, regularInfo, summaryInfo, tabs, { maxTitle: 'Detailed Information'} );																		
								});
			
			// Add this marker to the map itself
			map.addOverlay(marker);

Beyond the usual point/marker/map overlay creation, the difference here is the additional variables for the HTML tab contents, the MaxContentTab instances (which in essence are the tabs), and the addition of a listener for when the marker is clicked. When our marker is clicked, we want it to invoke openMaxContentTabsHtml, a method which is part of the TabbedMaxContent API. We pass to this method our map instance, the HTML string for the minimized information, the HTML string for the maximized information, the array of MaxContentTabs, and and additional configuration hash that in our example specifies a title for when the TabbedMaxContent is maximized.

Note that you can have the marker creation in a loop and reuse the variables point, marker, tabNhtml, and tabN. The lab example, which is more sophisticated in that it is using some jQuery AJAX loading, does just that.

For now, I’ll leave off with some changes that I would make if I were to redo my code. I’d probably use jQuery to get the map div, as opposed to the generic getElementById. I would also try to better use the jQuery event model and management system rather than the GEvent system. For now, these techniques work and work cross-browswer. At the end of the day, that’s what’s important.

Next time, I’ll go deeper into TabbedMaxContent with jQuery’s AJAX APIs to handle a retrieved marker set and to have dynamic data within the tabs.

Until then…