Google Maps API Tutorial

Tabbed Info Windows

Here's a simple example

Here's a more complicated example in which each info window has a different number of tabs.

The map.openInfoWindowTabs(), map.openInfoWindowTabsHtml(), marker.openInfoWindowTabs() and marker.openInfoWindowTabsHtml() methods allow tabbed info windows to be created. All the tab switching is done for you by the API.

To use openInfoWindowTabsHtml() to create a tabbed window, you need to pass it an array of GInfoWindowTab() objects. One such object for each tab.

The GInfoWindowTab() constructor is: new GInfoWindowTab(label, contents, onClick)
The label is a string that will be displayed on the tab. It holds 10 characters.
The content is a HTML DOM element (openInfoWindowTabs) or a string containing HTML (openInfoWindowTabsHtml).
I don't yet know what the onClick does. It looks like it's supposed to be a function that gets called when the tab is clicked, but I can't get it to work.

You can have as many tabs as you like, but if you have more than two the graphics fall apart if the info window isn't wide enough. Make the info window wider by using a style "width:XXXpx" in the GInfoWindow() contents. The width needs to be at least 88 pixels per tab.

Potential Pitfalls

1. The size of the info window is calculated beforehand to be large enough to hold the largest of the contents. If you've got one panel that needs a very large info window then another panel that has very little content will look rather strange.

Back to Mike's Homepage
Up to the start of this tutorial