Example 18 - Tabbed Info Windows

This simple example displays how to create tabbed info windows over a marker. While we haven't done anything extraordinary here, you'll get the idea. Just like the infowindow tag, you can define HTML or plain text to display in each tab of the tabbed info window.

Tabbed info windows are only available on version 2 maps. Version 1 maps will not display the info window if it is tabbed.

Here's the code we used:

<googlemaps:map id="map" width="250" height="300" version="2" type="STREET" 
		zoom="12">
  	<googlemaps:key domain="localhost" key="xxxx"/>
  	<googlemaps:imageoverlay id="image_1" url="/GoogleMaps/images/icon2.gif"
  	    opacity="0.50" x="50" y="10" link="http://www.lamatek.com/GoogleMaps/"/>
 	<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" 
 	    state="MD" zipcode="21921" country="US"/>
	<googlemaps:marker id="marker1" point="point1">
		<googlemaps:tabbedInfoWindow display="true">
			<googlemaps:tab label="Tab One">
				This is tab one content.
			</googlemaps:tab>
			<googlemaps:tab label="Tab Two">
				This is tab two content.
			</googlemaps:tab>
		</googlemaps:tabbedInfoWindow>
	</googlemaps:marker>
	<googlemaps:message>Please wait...</googlemaps:message> 
</googlemaps:map>
  

There are countless uses for tabbed info windows, maybe one tab contains data, the second a web form. Who knows, the options are up to you.

Our next example shows how to use marker clustering.