How to display tabs in Google Maps Info Window

Google MAPS API have added lots of tab related features to its info windows.
We can use multiple tabs in one info windows, and this can be changed
using different GInfoWindow methods provided be the API.
So displaying tabs in Google Maps Info Window is really a simple task.

Following code snippet creates an info window with two tabs in it.

Lets first create a container for our map.

var oMap = new GMap2(document.getElementById("divMap"));

Now, check if our browser supports Google Maps

if(GBrowserIsCompatible()) {
 var oMap = new GMap2(document.getElementById("divMap"));
}

Now lets initialize the map to a specific area, this can be done as:

//the setCenter function accepts two arguments, one is the point
//calculated from lattitude & longitude, and second is the 
//zoom level
if(GBrowserIsCompatible()) {
 var oMap = new GMap2(document.getElementById("divMap"));
 oMap.setCenter(new GLatLng(82, -110), 3);
}

Now lets add controls to our map. Google Maps API provides different
control functions, but we will be adding just two of those.

if(GBrowserIsCompatible()) {
 var oMap = new GMap2(document.getElementById("divMap"));
 oMap.addControl(new GSmallMapControl());
 oMap.addControl(new GMapTypeControl());
 oMap.setCenter(new GLatLng(82, -110), 3);
}

Now lets add a marker in our map. Markers in Google Maps are
the simplest among provided overlays.

if(GBrowserIsCompatible()) {
 var oMap = new GMap2(document.getElementById("divMap"));
 oMap.addControl(new GSmallMapControl());
 oMap.addControl(new GMapTypeControl());
 oMap.setCenter(new GLatLng(82, -110), 3);
 
 marker = new GMarker(new GLatLng(82, -110));
 oMap.addOverlay(marker);
}

Lastly lets add a tabbed info window now.

if(GBrowserIsCompatible()) {
 var oMap = new GMap2(document.getElementById("divMap"));
 oMap.addControl(new GSmallMapControl());
 oMap.addControl(new GMapTypeControl());
 oMap.setCenter(new GLatLng(82, -110), 3);
 
 marker = new GMarker(new GLatLng(82, -110));
 oMap.addOverlay(marker);
 
 var tabInfos = [
  new GInfoWindowTab("First Tab", "Contents for first tab."),
  new GInfoWindowTab("Second Tab", "Contents for second tab."),
  new GInfoWindowTab("Third Tab", "Contents for third tab.")
 ];
 
 marker.openInfoWindowTabsHtml(tabInfos, {
  selectedTab: 1, //first tab will be selected
  maxWidth: 320 //max width of info window
 });
 GEvent.addListener(marker, 'click', function () {
  marker.openInfoWindowTabsHtml(tabInfos);
 });
}

And that's it.