InfoBox labels blocking click propagation for polygons?

334 views
Skip to first unread message

ping

unread,
Nov 30, 2010, 3:53:11 AM11/30/10
to Google Maps JavaScript API v3
Hi everybody

I'm porting an existing app over from v2, but I'm hitting a stumper in
the most surprising of places: labels on clickable polygons.

Previously on v2, I was using the excellent Elabel extension but
there's no official port for v3. I did find an unofficial Elabel v3
port, but it looks like the Google-released InfoBox library (http://
code.google.com/p/google-maps-utility-library-v3/wiki/Libraries) is
the recommended way to go.

v2 Mockup (with elabel): http://li-ping.com/protos/polygons_v2.html
v3 Mockup (with infobox): http://li-ping.com/protos/polygons_v3.html

In the v2 page, the polygon area covered by the label still responds
to mouse clicks (click on the label to see) and label is not obscured.

In v3, I cannot seem to get the click on the label area to propagate
down to the polygon. The InfoBox lib allows the pane to be specified,
and I've tried using different panes (above and below the polygon
pane).

When using a higher pane, the label is not obscured by the polygon but
click doesn't register. When using a lower pane, the click registers,
but the label is obscured. I cannot seem to have it both ways like in
v2.

Am I missing something? Does anyone have any idea how to fix this?
Thanks!

Gary Little

unread,
Nov 30, 2010, 5:58:01 PM11/30/10
to Google Maps JavaScript API v3
In your V3 example, because you've set InfoBox's
enableEventPropagation property to true, the click event passes from
the overlayShadow pane to the map itself -- as you've observed. I
believe the various V3 map panes are independent of one another so an
event originating in one pane does not get passed to objects in
another pane, they go straight to the map. The polygon you've defined
must be in one of these other panes.

You might try adding the label to the same pane as the polygon and see
if it helps.

Gary

ping

unread,
Nov 30, 2010, 10:37:48 PM11/30/10
to Google Maps JavaScript API v3
Hi Gary
I've given your suggestion a try.

I've updated the v3 example to add labels to the overlayLayer pane
(which according to documentation
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes
is the pane where the polygons are). I've also bumped up the zIndex to
force it above the polygon.

All these end up with pretty much the same results as before (the
first 2 labels).

- ping

Gary Little

unread,
Dec 1, 2010, 1:51:02 AM12/1/10
to Google Maps JavaScript API v3
Ping,

Looks like there's no easy solution. You will probably have to keep
track of the polygon the label is associated with, then trigger an
event on the polygon when the label is clicked.

Gary

On Nov 30, 7:37 pm, ping <liping....@gmail.com> wrote:
> Hi Gary
> I've given your suggestion a try.
>
> I've updated the v3 example to add labels to the overlayLayer pane
> (which according to documentationhttp://code.google.com/apis/maps/documentation/javascript/reference.h...

ping

unread,
Dec 1, 2010, 3:34:16 AM12/1/10
to Google Maps JavaScript API v3
Gary,

Capturing the label click is my last resort really the label can
overlap with a neighbouring polygon (example for a very vertically
narrow polygon). So clicking on the overlapping portion of the label
shouldn't trigger the event on the label's associated polygon.

I'll have to hold off migrating to v3 until there is a better way to
do this.

I'm curious though, is this behaviour by design? Or is something not
working as expected? I've browsed the v3 issues and don't see anything
related. It looks like it's just me!

Thanks a lot for going through this, I appreciate the inputs.

- ping

Nianwei Liu

unread,
Dec 1, 2010, 10:23:33 PM12/1/10
to Google Maps JavaScript API v3
Ping,
Event propagation indeed seems to have some issues in V3. I think
part of the reason might be we want different behavior at different
use cases, and those are hard to design for a perfect configuration.
If you can make a good summary with examples and file an issue, the
Google team may make improvements.
As an alternative to infoBox, you can try use simple marker with
images from Google chart API's text bubble. That provides more options
for fonts style like outlines etc. Unfortunately the event propagation
issue still exists -- events stopped at markers even the markers are
created as unclickable.

ping

unread,
Dec 3, 2010, 12:35:42 AM12/3/10
to Google Maps JavaScript API v3
Hi Nianwei

The styling is not really a problem. I've experimented using the
InfoBox, RichMarker libs, and even the elabel v3 port I found but
nothing has worked so far at all with regards to the even propagation.

Thanks for your inputs though! I've submitted an issue based on the
discussion here.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2913

- ping
Reply all
Reply to author
Forward
0 new messages