Tabbed InfoWindow Google Maps API v3 using a KML layer

Question

I am attempting to add tabs to the infowindow of this site http://nctcog.org/trans/data/trafficcounts/index.asp

As I have literally thousands of points stored in a database, as the map center changes, I grab the map boundaries and pass them to a page that build the KML file which then loads them using google.maps.KmlLayer. Most of the data in the infowindow is stored in the same table as the lat,lon and I load it along with the coordinates when I build the KML file.

I have tried several methods of manipulating the tag with no success.

I know there is a listener that can be added to manipulate the infowindow, but since I'm not adding my markers with a listener, how do I tie it to the correct marker?

It sounds like you have two questions: 1. add tabs and 2. assigning InfoWindow to a marker. Are they related somehow? — Heitor Chang
I guess so since it appears the only way to implement a tabbed window is through a listener event. — alemus

Heitor Chang Heitor Chang · Accepted Answer · 2012-04-13T18:45:19

The hard part is manipulating your markers from a KML file. As far as I have tried, there's no way to do so when you are using KMLayer. Since you are creating KML on the fly, it makes things easier.

Luckily :) I worked on a KML question recently and have a starter file. An annoying "feature" is that the AJAX calls forced me to put the HTML and KML in the same public computer. I couldn't work offline. You could try a local web server, I didn't.

https://files.nyu.edu/hc742/public/googlemaps/kmlcircle.html

The key idea is to replace the default functionality of createMarker shown below with the name of your own function. In this case I was adding circles, in yours, you need to add InfoWindows.

    geoXml = new geoXML3.parser({
      map: map, 
      createMarker: addCircle});

Adding tabs to your infowindow can be done in at least two ways. The JQuery way and Tabber Way (once this page is loaded click on the green line)

Tabbed InfoWindow Google Maps API v3 using a KML layer

1 Answers