how to pass data to a marker click function

1,513 views
Skip to first unread message

uno

unread,
Oct 16, 2011, 8:27:49 AM10/16/11
to Google Maps JavaScript API v3
hello, probably only half a maps question, but if someone could
enlighten me...
what i do is:

google.maps.event.addListener(Marker, 'click', function() {
doSomethingWith(this);
});
function doSomethingWith(that) {...};

works fine. but, i have 10k+ markers, and this way i create 10k+
objects, right?
what i'd like to do is:

google.maps.event.addListener(Marker, 'click', doSomethingWith);
function doSomethingWith(e) {...}

where e should be the marker object, since i have to access some of
its properties. but e is a LatLng object.
so, how to get a reference to the marker itself?

this:
google.maps.event.addListener(Marker, 'click',
doSomethingWith(Marker));
obviously opens the gates of hell, when used in 10k+ loops... of
course... ;)

any idea anybody? it's not a problem anyway to use the anonymous
function above, at least no browser i've tested with had performance
problemes (markers are handled in markerClustererPlus). but i want to
save something. is it worth the effort?
thanks, uno


alexandroid

unread,
Oct 17, 2011, 4:54:05 AM10/17/11
to Google Maps JavaScript API v3
See "Accessing Arguments in UI Events" section, in particular code
example there. http://code.google.com/apis/maps/documentation/javascript/events.html#EventArguments

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

In your case instead of map object you will have a marker object, but
it should work.

To avoid creating 10k+ markers you need to figure out how can you only
create those which are located within map bounds and update (or clear
and re-add) all markers on the visible area when map is moved or
zoomed in/out.

~Alex

Martin™

unread,
Oct 17, 2011, 12:40:46 PM10/17/11
to Google Maps JavaScript API v3
Hi uno.

Version 3 of the API has made marker click event delegation somewhat
impossible (or tricky).

The Map click event doesn't fire when the user clicks on the Map while
(also) clicking on a Marker.

So, tradionally you cannot assign a single event listener to the Map
to handle ALL Marker clicks.

I've been working on an alternative approach.
The code is not ready for public consumption yet but you can take a
look:

http://developer.martinpearman.co.uk/markers_event_layer/demo/index.htm?eventtype=click

Here a single Map click event listener detects ALL Markers that have
been clicked on.
Not just whatever Marker happens to be upper most visually (think z-
index).

There are some problems with optimised Markers, see here for details:

https://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/98cd2607d15cc805/3f6725964190a6a0?hl=en#3f6725964190a6a0

My code also works well with mouse events:

http://developer.martinpearman.co.uk/markers_event_layer/demo/index.htm

With that option a single Map mousemove event listener performs much
the same as the Map click listener.

Once Chris and the Google team decide how a Map mousemove event should
behave as regards propogation i'll work more on my code to create a
(hopefully useful) library.

Martin.

uno

unread,
Oct 18, 2011, 8:47:07 AM10/18/11
to Google Maps JavaScript API v3
i'm sorry but my question obviously wasn't clear.

instead of creating 10k+ individual anonymous functions as click
events for the markers,
i'd rather like to assign 10k+ references to one public marker
handling function. but anyway,
from my tests it seems to make no difference performance wise, in
newer browsers, and i don't
care about IE6...

btw. 10k markers isn't really a problem for markerClusterer. i've also
tried adding/deleting markers dynamically
based on bounds. it's ok, but that way i have to potentially handle a
lot of ajax requests to the database.
if performance goes critical one day, i'll probably play around with
javascript/nosql techniques and dynamic loading.

thanks, uno



On 17 Okt., 10:54, alexandroid <kamot...@gmail.com> wrote:
> See "Accessing Arguments in UI Events" section, in particular code
> example there.http://code.google.com/apis/maps/documentation/javascript/events.html...
Reply all
Reply to author
Forward
0 new messages