2

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.

Bob
  • 1,355
  • 5
  • 19
  • 38
  • I haven't actually tried to do this before, but wouldn't you give the info-window tabs when you create the infowindow rather than on init? At init the info-window doesn't exist. Also, is it possible to have more than one info window? If so, then the id you are using wouldn't be unique. – Kevin B Jun 07 '12 at 17:56
  • It looks like your coming from familiarity with v2 api where infowindow tabs were built in. Unfortunately, that never made it into the v3 api so you have to, as Kevin said, create the tabs when you open the info window. If you aren't familiar with create tabbed interfaces yourself, you can look into something like jQuery UI to help you with it. – Adam Jenkins Jun 07 '12 at 18:03
  • @Kevin B: Well, no. I called all those functions from withing the `opneInfoWindow` function. As for the uniquness, are you saying I should try to use a CSS class instead of an id? – Bob Jun 07 '12 at 18:04
  • @Adam: Not really. I've been using Google Maps since version 3. I never touched V2 or below. – Bob Jun 07 '12 at 18:06

2 Answers2

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

BruceHill
  • 6,954
  • 8
  • 62
  • 114
NickNo
  • 872
  • 15
  • 32
0

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • can i use `class` instead of `id` for the main div? – Bob Jun 07 '12 at 18:16
  • You could, but then how do you select one info window without selecting them all? You don't have a context to work with. – Kevin B Jun 07 '12 at 18:18
  • But wouldn't the map know which infobox should be called when I click on a marker? That's what I specify in `openInfoWindow` function at the end - the `this` keyword, which tells it to attach this content to the current marker we are processing. FYI I'm using `jquery ui map` plug-in for working with Google Maps. – Bob Jun 07 '12 at 18:21
  • Ah, I didn't notice the jQuery plugin syntax you were using, I've never used that plugin. I'll do some research in a few, can you give me a link to it to save time? – Kevin B Jun 07 '12 at 18:24
  • "But wouldn't the map know which infobox should be called when I click on a marker?" No because the infowindow doesn't exist until the plugin uses the google maps api to create it, but it doesn't return a reference to it. – Kevin B Jun 07 '12 at 18:31
  • So, I have to use your method then? – Bob Jun 07 '12 at 18:32
  • Well, I wouldn't put it that way, I'm sure there's some other way to do it but this is the only way I could come up with. I updated my answer due to a typo. – Kevin B Jun 07 '12 at 18:33
  • Okay. I'll play around with it. Having so many ids though seems wasteful, no? – Bob Jun 07 '12 at 18:36
  • It's not like you are storing the ID's anywhere, they just reside in the DOM like any other property. – Kevin B Jun 07 '12 at 18:37
  • What does it do or not do? What errors happen? I can't diagnose "Doesn't work". – Kevin B Jun 07 '12 at 18:53
  • Add this as a debugging test: `alert($('#' + ts + 'info').length)` If the alert is 0, more than likely the openInfoWindow method is asynchronous meaning the code after it runs before it is done. At that point, I would suggest trying a `setTimeout` around that line – Kevin B Jun 07 '12 at 19:06