Tabbed infowindow in Google Map V3 ~ Programming Share

This article will show you how to create a tabbed infowindow in Google Map V3
First, download the css and js script file. Download here
Then, putting it in your project and referring it in your html code.

<link type="text/css" href="/CSS/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="/CSS/thickbox.css" rel="stylesheet" />
<script type="text/javascript" src="/SCRIPT/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/SCRIPT/jquery-ui.min.js"></script>

Like the previous post, we have to define the location, map option, maker:
        var latlng = new google.maps.LatLng(10.823099, 106.629664);
        var myOptions =
        {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(10.823099, 106.629664),
            map: map
        });

Next, we define the content of the infowinow:
var text1 = [
          '<div id="InfoText">',
          '<div class="tabs"><ul><li><a href="#tab1">Details</a></li>',
          '<li><a href="#tab2" id="SV">Picture</a></li></ul>',
          '<div id="tab1">',
          '<ul>',
            '<li>Company name: ABC</li>',
            '<li>Address: 130 Truong Chinh</li>',
            '<li>City: Ho Chi Minh</li>',
            '<li>Country: Vietnam</li>',
          '</ul>',
          '</div>',
          '<div id="tab2">',
          '<p><center><a class="thickbox" href="/Images/Lighthouse.jpg"><img src="Images/Lighthouse.jpg" width="120" height="80"></a></center></p>',
          '</div>',
          '</div>'
        ].join('');

You can see in the code above I had 2 tabs for the infowindow, one for Details and the other for Picture.
Then, define the infowindow and call it when the user clicks on the marker:

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker1, "click", function () {

            //             if (infowindow) infowindow.close();

            infowindow.setContent(text1);

            infowindow.open(map, marker1);

            $(".tabs").tabs();

            tb_init('a.thickbox');

        });

The figure bellow shows our result