Mantis and Jessamine

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…