Tabbed infowindow in Google Map V3

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

 
Hope this helps!


Read more:

Displaying jquery popup when clicking on an image link in infowindow
Working with a simple infowindow in google map
Adding a tooltip to marker
Add markers to Google Maps
Embedding a google map to the web page

Read more »

Displaying jquery popup when clicking on an image link in infowindow

You'd already know how to working with infowindow in Google map. In this post, I'll do a little interesting thing. When we click on an image or a link in infowindow, a jquery popup will be displayed. I will guide you step by step.
First, downloading the latest jquery script version. You also have to download the thickbox.js and thickbox.css.
Then, putting it in your project and referring it in your html code.

<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/thickbox.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
        });

We also have to the define the content and the infowindow:

var contentString =
      '<div style="width: 350px; height: 200px;">' +
      '<ul>' +
        '<li>Company name: ABC</li>' +
        '<li>Address: 130 Truong Chinh, Tan Binh Dist</li>' +
        '<li>City: Ho Chi Minh</li>' +
        '<li>Country: Vietnam</li>' +
      '</ul>' +
      '<p></p>' +
      '<center><a class="thickbox" href="/Images/Lighthouse.jpg"><img src="Images/Lighthouse.jpg" width="120" height="80"></a></center>' +
      '</div>';


        var infoWindow = new google.maps.InfoWindow({ content: contentString });
        google.maps.event.addListener(marker, 'click', function () {

            infoWindow.open(map, marker);
            tb_init('a.thickbox');
        });

There are some differences here: I put a link and refer to the image in the contentString and a little code  tb_init('a.thickbox'); in the click event so that when we click on the image, the jquery popups will be displayed.

Cheers!!!!

Read more:

Working with a simple infowindow in google map
Adding a tooltip to marker
Multitab infowindow in Google Map V3
Add markers to Google Maps
Embedding a google map to the web page

Read more »

Working with a simple infowindow in google map

Infowindow displays in a floating window above the map. When we click on the marker, it will show us a floating window that contain the details of the location above the map. The info window looks a little like a comic-book word balloon.
In this post, I'd to show you how to work with infowindow.
Like previous post, we will set the latitude, longitude of the location:
 var latlng = new google.maps.LatLng(10.823099, 106.629664);

We also set the map option:
var myOptions =
        {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
Then, type the following code for infowindow:
var contentString =
      '<div style="width: 300px; height: 100px;">'+
      '<ul>'+
        '<li>Company name: ABC</li>'+
        '<li>Address: 130 Truong Chinh, Tan Binh Dist</li>'+
        '<li>City: Ho Chi Minh</li>' +
        '<li>Country: Vietnam</li>' +
      '</ul>'+
      '</div>';


        var infoWindow = new google.maps.InfoWindow({ content: contentString });
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);          
        });

• google.maps.InfoWindow constructor: help us to define the infowindow. 
• content: the details of content in the infowindow that was defined before.
• google.maps.event.addListener: catch the click event on the marker and open the infowindow

The figure below shows our result: 

Cheers!!

Read more »