如何使信息窗口在Google Map中具有标签？

Question

How can I make the my infoWindows have tabbed content? I tried things like:

google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });

* also tried to use infoWidnwow , infowindow , and iw instead of this keyword

and

.ready(function(){ $("#info").tabs();});

and

.bind('domready', function(){ $("#info").tabs(); });

None of these worked.

Code for creating markers and infowindows:

$('#map').gmap(mapOptions).bind('init', function(){
    $.post('getmarkers.php', function(json){
        var theMarkers = json;
        $.each(theMarkers, function(i, element) {
            $.each(element, function(object, attributes){
                $('#map').gmap('addMarker', { 
                    'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)), 
                    'bounds':true } ).click(function(){                             
                        $('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);                        
                }); 
            });
        });
    }); 
});

Somehow I need to tell this part:

$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);      

To tab the content that I pass to openInfoWindow .

Answer 1

There is a free jquery plugin that takes care of multiple tabs, positioning of each and styling i just found that has an intuitive interface for customization. Here is a demo

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Answer 2

Remove the first three snippets you posted and use this:

$('#map').gmap(mapOptions).bind('init', function() {
    $.post('getmarkers.php', function(json) {
        var theMarkers = json;
        $.each(theMarkers, function(i, element) {
            $.each(element, function(object, attributes) {
                $('#map').gmap('addMarker', {
                    'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
                    'bounds': true
                }).click(function() {
                    var ts = $.now();
                    $('#map').gmap('openInfoWindow', {
                        "<div id='" + ts + "info'>... your tab content ..."
                    }, this);
                    $('#' + ts + 'info').tabs();
                });
            });
        });
    });
});​

I created a unique string and used it to give the div a unique id, then used that to make the tabs.