Clicking an onclick link in an infowindow also fires a map click

2,013 views
Skip to first unread message

Joseph Elfelt

unread,
Jul 22, 2010, 10:45:07 AM7/22/10
to Google Maps JavaScript API v3
http://www.mappingsupport.com/forum_post/drag_marker_and_line_beta1.html

Click this map to set some markers and draw a line.
Then rightclick a marker to display an infowindow with the bones of a
context menu.
Click an item in the menu.
Close the alert window.

Notice that a new marker has been added to the map and the line has
been extended.
Apparently clicking an item in the context menu also fires a map
click.
I observed this result both before and after the 7-22 API release.

I searched the forum and Issues page and did not see this point
mentioned.

Is this something that I should report on the Issues page or is this
the way the API is intended to work?

Pil

unread,
Jul 22, 2010, 1:29:15 PM7/22/10
to Google Maps JavaScript API v3
I can confirm this behaviour and I cannot imagine that this is on
purpose.

A click event inside an info window should not trigger a click event
on the map.

It seems that the map click is dependent on the global infowindow,
because
calling the functions do_thing_1, do_thing_2 and do_thing_3 also
closes the infowindow. If you don't close the infowindow in these
functions no map click will be triggered.

Joseph Elfelt

unread,
Jul 22, 2010, 1:51:03 PM7/22/10
to Google Maps JavaScript API v3
Pil,

Thanks for your insight.

It will certainly be annoying to users if they have to close the info
window themselves after a menu function executes.

I'll experiment with trigger and clearListeners in the functions.

Joseph Elfelt

unread,
Jul 22, 2010, 4:53:43 PM7/22/10
to Google Maps JavaScript API v3
New map version:
http://www.mappingsupport.com/forum_post/drag_marker_and_line_beta2.html

Recap: My problem involves a global infowindow that displays a menu.
The info window uses an onclick command to execute different
functions.
When the user clicks a menu item in the info window that also causes a
map click to go into the queue.

Goal: Find code I can include in the functions that (1) will close
the info window (2) without a click being fired on the map.
An unwanted map click is a Bad Thing since it causes an additional
marker to appear and the line to be extended to that marker.

The marker context menu for the above map has 5 menu items functions
and each executes a different function with different code.
None of them accomplish my goal.
Either the infowindow is not closed (1, 2 & 5) or the infowindow is
closed but an additional marker is dropped on the map (3 & 4).

Note that the code for menu item #2 is:
google.maps.event.trigger(masu.infowindow, "closeclick");
To my surprise, this did not close the infowindow.
Hopefully I did not mess up this simple syntax.

Another item to note.
If a menu item is clicked and eventually the user closes the
infowindow by clicking the 'x', then an additional marker is _not_
dropped on the map.
But, if a menu item is clicked and the infowindow is closed with code,
then an additional marker _is_ dropped on the map.

Any suggestion for how I can achieve my goal?

Susannah (Google Employee)

unread,
Jul 22, 2010, 7:36:59 PM7/22/10
to Google Maps JavaScript API v3
I have confirmed the error. We'll have it fixed soon.

Thanks for reporting it!
Susannah

Susannah (Google Employee)

unread,
Jul 22, 2010, 8:19:59 PM7/22/10
to Google Maps JavaScript API v3
Upon further investigation, I realize the problem is caused by closing
the infowindow in the click handler without stopping the propagation
of the event. Because you close the infowindow, the event goes
directly to the map instead of passing through the infowindow which
blocks the map from handling it.

So, if you are determined to call infowindow.close() in the onclick
handler, you'll need to first stop the propagation of the DOM event.
I did this by changing your onclick handlers from
onclick='do_thing_3();return false;' to onclick='do_thing_3', which
will pass the event as the first argument. You can then call
stopPropagation on the event (and set returnValue = false; for IE).

You can read more about event propagation here: http://www.quirksmode.org/js/events_order.html

Hope this helps!
Susannah

On Jul 23, 9:36 am, "Susannah (Google Employee)"

Joseph Elfelt

unread,
Jul 22, 2010, 8:51:23 PM7/22/10
to Google Maps JavaScript API v3
Susannah,

Thanks very much!
I had begun to suspect this was a propagation issue.
Since I've not had to deal with that type of issue before, I'll check
out the quirks link.

Pil

unread,
Jul 23, 2010, 2:32:02 AM7/23/10
to Google Maps JavaScript API v3
That's why I prefer my own event handlers and get rid of the API
provided event handlers whenever possible. So the handlers work API
and bug independent.

Further: This pre-defined handlers are more flexible to use because
they can be used during the capturing phase - when needed. So it's
even possible that they work as expected when the API handlers are not
intended to work.






On Jul 23, 2:19 am, "Susannah (Google Employee)"

Joseph Elfelt

unread,
Jul 26, 2010, 10:54:41 AM7/26/10
to Google Maps JavaScript API v3
The bones of the context menu in this map now work fine.
I stopped event propagation/bubbling as Susannah recommended.

Click the map to drop (draggable) markers and draw a line.
Right click a marker for the context menu.
When you select a menu item (1) the corresponding function will
execute, (2) the context menu will close and (3) an additional marker
will _not_ appear on the map.

http://www.mappingsupport.com/forum_post/context_menu.html


Reply all
Reply to author
Forward
0 new messages