How do i create an infowindow with 2 or 3 tabs?

[Ravi]

There is a function to create for infowindow with 2 or 3 tabs in
google maps api v2.

But i feel it is difficult to create an infowindow with 2 or 3 tabs in
google maps api v3. Because there is no separate function for this.

Can you help in this?

[Rossko]

> But i feel it is difficult to create an infowindow with 2 or 3 tabs in
> google maps api v3. Because there is no separate function for this.

You could use the infobubble add-on , which supports tabs
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

[Ravi]

Okay, I feel i can use it, is this separate function(infobubble) to create multiple tabs inside an infowindow?

Like we are using GInfoWindowTab in google maps api V2.

Can you tell me briefly?

[Andrew Leach]

On 20 April 2011 09:55, Ravi <ravib...@gmail.com> wrote:
>
> Can you tell me briefly?

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/

Documentation is available. The utility library's urls are standard
and can be shortened as here.

[Chandra Miller]

I have been wondering the same exact thing Ravi. Thank you for your
post and both replys.

[Ravi]

Ur always welcome.

[Ravi]

Hi, i have read your given documentation and saw infobubble example, after understanding, i was going to use, but it could not come. I just need to show infowindow with two tabs. I do know how to use infobubble in my code. Please see my attachments.

[Guus Jansen]

On http://reizigers.jade1.nl/Tabbed_Infowindows.html you can find an example of a tabbed-infowindow implementation, without using any infobubble library.

Maybe the source of this example is helpfull to solve your problem. 

[Chandra Miller]

Thank you for the post Guus. I am trying to also add tabbed
infowindows to my map at http://156.42.96.39/alert/Google/rain.html.

[Ravi]

Thank you for the post, i hope i got it, what i feel is how can i get separate code for info window with tabs. the code is too big for me and i felt confused.
Can you help me in this one?

[Guus Jansen]

Sorry, but I have no time to support you more than answering some dedicated questions about my example.

 

You need to have some knowledge of the 'DOM-model' and 'Javascript writing' (oa prototyping) to understand the source of my example.

If you don't have this knowledge, than please choose another way to implement your application.

 

The example:

 

   as documented in the source:

 

 Divs of first marker Tab-groep: 1 group-div, 1 tab-span-div and a content-div per tab-page

We try to generate the div-structure, for the tab-pages: document.createElement('DIV')/'SPAN' in JS-array's.

wrapper[i]=

tabsDiv[i]=

tabspan1[i]=

tabspan2[i]=

tabspan3[i]=

conttab1[i]=

detail_Map[i]=

conttab2[i]=

conttab3[i]=

every marker gets his own tab-infowindow instance.

don't forget the css for the structure elements: see the wrapper-, cardContent- and minimap-class!

 

            

functions:

Tab-navigation (Tabcard, makeActiv, ToggleTabs)

create a Marker with infotabs (createMarker)

set a Infowindow-Tab (iwTab)

new Marker method to build the div-structure for our tabbed-Infowindow (openiwTabsHtml)

The rest is HTML and filling in the contents of the example.

 

I hope it helps you and others a little, I am only a 'free time programmer'

Guus

 

   

               

 

 

[Chandra Miller]

Ravi,

I found another example for Info Windows with Tabs that I was able to
sussessfully use. My map markers are coming from a xml file that is
being read by a javascript file - so I inserted the code into my java
script. Here is the link http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/

and the code

// Create an array that will hold the tabs
var tabs = [];
// Create tabs and add them to the array
tabs.push(new GInfoWindowTab('Tab 1', 'Content of tab 1'));
tabs.push(new GInfoWindowTab('Tab 2', 'Content of tab 2'));
// Add tabs to the InfowWindow
marker.openInfoWindowTabsHtml(tabs);

I have it working on my streamflow Google Map at
http://156.42.96.39/alert/Google/streamflow.html. I still need to
input a graph on my second tab but I wanted to post this incase it
would help you.

Chandra