How to add listener for overlays

3,753 views
Skip to first unread message

tomar

unread,
Dec 23, 2009, 12:20:22 AM12/23/09
to Google Maps JavaScript API v3
Hi,

I am facing a small issue.
When I am trying to open a info window on click of a custom overlay,
but Its not working. However same is working with marker. As far as I
know both extends MVC object but I am not able to find the cause of
problem.

....
...
....
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'HELLO'
});
var infowindow = new google.maps.InfoWindow({
'content': 'Hello Tomar'
});

Working code for marker->
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Not Wroking for overlay ->
// USGSOverlay is custom overlay so overlay is coming on map -
copied sample code
var overlay = new USGSOverlay(bounds, srcImage, map);

// not able to add the listener for click event on overlay :(
google.maps.event.addListener(overlay, 'click', function() {
infowindow.open(map,overlay);
});

Would someone please suggest me to make this working?

Chris Apolzon

unread,
Dec 23, 2009, 10:43:30 AM12/23/09
to google-map...@googlegroups.com
I haven't tried doing this with an overlay but if you can afford to use a polygon instead, I can confirm that will work.  As a fallback I believe you could surround the overlay with a transparent polygon.

-- Sent from my Palm Pre


--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Bob

unread,
Dec 23, 2009, 11:28:02 AM12/23/09
to Google Maps JavaScript API v3
Is your custom overlay triggering a 'click' event? Remember that a
mouse event is a DOM event and "addListener" only listens for custom
events. Basically you have to make sure your custom overlay listens
for the DOM mouse event for whatever element your overlay uses and
then call google.maps.trigger(this, "click") whenever the user clicks
the overlay

Bob

unread,
Dec 23, 2009, 11:30:52 AM12/23/09
to Google Maps JavaScript API v3
Sorry, using this wouldn't work. Doing this in a custom overlay would
work:

var me = this;
google.maps.event.addDomListener([whatever element is used], "click",
function(ev) {
var e = ev||window.event;
google.maps.trigger(me, "click", e);
});

tomar

unread,
Jan 12, 2010, 1:14:05 AM1/12/10
to Google Maps JavaScript API v3
Sorry for seeing these replies lately,

Actually I got the solution so for now I am marking this thread
closed.

Only silly mistake was there. Now its working fine.


Anyways Thanks for your help.

Dharmendra

On Dec 23 2009, 9:30 pm, Bob <gschneide...@gmail.com> wrote:
> Sorry, using this wouldn't work. Doing this in a customoverlaywould
> work:
>
> var me = this;
> google.maps.event.addDomListener([whatever element is used], "click",
> function(ev) {
>     var e = ev||window.event;
>     google.maps.trigger(me, "click", e);
>
> });
>
> On Dec 23, 8:28 am, Bob <gschneide...@gmail.com> wrote:
>
>
>

> > Is your customoverlaytriggering a 'click' event? Remember that a


> > mouse event is a DOM event and "addListener" only listens for custom
> > events. Basically you have to make sure your customoverlaylistens

> > for the DOM mouse event for whatever element youroverlayuses and

> > >   // USGSOverlay is customoverlaysooverlayis coming on map -
> > > copied sample code
> > >   varoverlay= new USGSOverlay(bounds, srcImage, map);
>
> > >   // not able to add the listener for click event onoverlay:(

AleCaste

unread,
Jul 8, 2011, 4:17:22 AM7/8/11
to google-map...@googlegroups.com
Tomar,
Did you get this working?
I am facing the same problem... but ONLY on iPhone.
The same code is working fine on Android phones and Chrome Windows.

How did you fixed this?

Robin Di Capua

unread,
Aug 18, 2011, 9:30:40 AM8/18/11
to Google Maps JavaScript API v3

I managed to make it work with:

USGSOverlay.prototype.addClickEvent = function() {
google.maps.event.addDomListener(myCustomOverlay.div_, 'click',
function() {
alert("you clicked!");
});
}

but on the iPhone is weird, if I tap on my overlay when the map is
rendered it works, and then it's not working anymore while on Chrome
it keeps working whenever I click on it. Did someone experience the
same problem?
Reply all
Reply to author
Forward
0 new messages