Tabbed Infowindow

822 views
Skip to first unread message

Brian Bolt

unread,
Aug 26, 2009, 4:17:06 PM8/26/09
to Google Maps JavaScript API v3
Does anyone have an simple example of a tabbed infowindow in v3?

pamela (Google Employee)

unread,
Sep 1, 2009, 12:13:25 AM9/1/09
to google-map...@googlegroups.com
Hi Brian-

I've put together an example using the JQuery tabs library:

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/tabs.html

http://docs.jquery.com/UI/Tabs

This example seems to work, but we're concerned that it isn't safe to
try and operate on DIVs passed into an infowindow immediately after
opening an infowindow, since the DIV may not exist - and that is what
this example does. It would be safer to operate on the DIVs after
receiving an event indicating that the infowindow DOM was prepared.
We're looking into doing that, and I've created this request for you
to track:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1647

- pamela

Brian Bolt

unread,
Sep 15, 2009, 1:32:04 PM9/15/09
to Google Maps JavaScript API v3
just getting to work on this now. Thank you for all your help.

On Aug 31, 9:13 pm, "pamela (Google Employee)" <pamela...@gmail.com>
wrote:

Mike

unread,
Oct 23, 2009, 12:13:31 AM10/23/09
to Google Maps JavaScript API v3
Hi Pamela,

I'm encountering some funky behavior implementing your example.
I have 10 markers, some of which share the same point. When this
occurs the infowindow should contain a tab for each marker.
This works fine, however, if I am to trigger an infowindow click (by
using the attached grid), the style sheet appears not to load for any
of the duplicated marker infowindows except for the last infowindow
created.

Once I trigger the last infowindow created for a specific lat/lng, all
of the infowindows with that lat/lng render correctly. I'm baffled!

The example can be found at http://www.bostonrealtylive.com

Here is my code:

var header = $doc.createElement("ul");
header.innerHTML = "<li><a href=\"#fragment-"+markers.length
+"\"><span>Header</span></a></li>";
headers.push(header);

var info = $doc.createElement("div");
info.id = "fragment-"+markers.length;
info.innerHTML = "<p>"+markers.length+"</p>"
infos.push(info);

for (i=0;i<markers.length;i++){
if (marker.getPosition().equals(markers[i].getPosition())){
header.appendChild(headers[i]);
info.appendChild(infos[i]);
}
}

markers.push(marker);

var div = $doc.createElement("div");
div.id = "tabs";
div.setAttribute("style","font-size:8pt;width:400px");
div.style.fontSize=11;
div.style.width="400px";

div.appendChild(header);
div.appendChild(info);

var infowindow = new $wnd.google.maps.InfoWindow({
content: div
});

for (i=0;i<markers.length;i++){
if (marker.getPosition().equals(markers[i].getPosition())){

$wnd.google.maps.event.addListener(markers[i], "click", function
() {
if (currentwindow) {
currentwindow.close();
}
infowindow.open(map, marker);
$wnd.$("#tabs").tabs();
currentwindow = infowindow;
});

}
}

Your help is appreciated!

Mike


On Sep 1, 12:13 am, "pamela (Google Employee)" <pamela...@gmail.com>
wrote:
> Hi Brian-
>
> I've put together an example using the JQuery tabs library:
>
> http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/tabs.html
>
> http://docs.jquery.com/UI/Tabs
>
> This example seems to work, but we're concerned that it isn't safe to
> try and operate on DIVs passed into an infowindow immediately after
> opening an infowindow, since the DIV may not exist - and that is what
> this example does. It would be safer to operate on the DIVs after
> receiving an event indicating that the infowindow DOM was prepared.
> We're looking into doing that, and I've created this request for you
> to track:http://code.google.com/p/gmaps-api-issues/issues/detail?id=1647
>
> - pamela
>

Mike

unread,
Oct 24, 2009, 5:49:05 PM10/24/09
to Google Maps JavaScript API v3
this has been solved...

On Oct 23, 12:13 am, Mike <michaeljr...@gmail.com> wrote:
> Hi Pamela,
>
> I'm encountering some funky behavior implementing your example.
> I have 10 markers, some of which share the same point.  When this
> occurs theinfowindowshould contain a tab for each marker.
> This works fine, however, if I am to trigger aninfowindowclick (by
> using the attached grid), the style sheet appears not to load for any
> of the duplicated marker infowindows except for the lastinfowindow
> created.
>
> Once I trigger the lastinfowindowcreated for a specific lat/lng, all
> of the infowindows with that lat/lng render correctly.  I'm baffled!
>
> The example can be found athttp://www.bostonrealtylive.com
>
> Here is my code:
>
>                 var header = $doc.createElement("ul");
>                 header.innerHTML = "<li><a href=\"#fragment-"+markers.length
> +"\"><span>Header</span></a></li>";
>                 headers.push(header);
>
>                 var info = $doc.createElement("div");
>                 info.id = "fragment-"+markers.length;
>                 info.innerHTML = "<p>"+markers.length+"</p>"
>                 infos.push(info);
>
>                 for (i=0;i<markers.length;i++){
>                         if (marker.getPosition().equals(markers[i].getPosition())){
>                                 header.appendChild(headers[i]);
>                                 info.appendChild(infos[i]);
>                         }
>                 }
>
>                 markers.push(marker);
>
>                 var div = $doc.createElement("div");
>                 div.id = "tabs";
>                 div.setAttribute("style","font-size:8pt;width:400px");
>                 div.style.fontSize=11;
>                 div.style.width="400px";
>
>                 div.appendChild(header);
>                 div.appendChild(info);
>
>             varinfowindow= new $wnd.google.maps.InfoWindow({
>                 content: div
>             });
>
>                 for (i=0;i<markers.length;i++){
>                         if (marker.getPosition().equals(markers[i].getPosition())){
>
>                             $wnd.google.maps.event.addListener(markers[i], "click", function
> () {
>                                 if (currentwindow) {
>                                                 currentwindow.close();
>                                         }
>                                infowindow.open(map, marker);
>                                 $wnd.$("#tabs").tabs();
>                                 currentwindow =infowindow;
>                             });
>
>                         }
>                 }
>
> Your help is appreciated!
>
> Mike
>
> On Sep 1, 12:13 am, "pamela (Google Employee)" <pamela...@gmail.com>
> wrote:
>
> > Hi Brian-
>
> > I've put together an example using the JQuery tabs library:
>
> >http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/tabs.html
>
> >http://docs.jquery.com/UI/Tabs
>
> > This example seems to work, but we're concerned that it isn't safe to
> > try and operate on DIVs passed into aninfowindowimmediately after
> > opening aninfowindow, since the DIV may not exist - and that is what
> > this example does. It would be safer to operate on the DIVs after
> > receiving an event indicating that theinfowindowDOM was prepared.
Reply all
Reply to author
Forward
0 new messages