markerClick boundaries are incorrect?

[EvoSteven]

Current behaviour: The area that is "clickable" using the (markerClick) output is some small area in the top left of the overlay in the demo example. A small overlay will be enveloped by the clickable area, so it might be a constant size? Open the demo example and hover over the overlay blue boxes, the top left area turns the cursor into the "clickable pointy finger" instead of the "open hand". It does work as expected when in "mobile" mode (F12 --> Toggle device toolbar)

Info windows do work and are not affected by this.

Expected behaviour: The size of the child defines what is clickable.

[AckerApple]

just put (click) on your overlay element

[AckerApple]

I have noted the code: https://github.com/AckerApple/agm-overlays/blob/master/src/AgmOverlay.component.ts#L31

[EvoSteven]

Thank you for the swift response. I remember trying (click) and getting similar results but that may have been a fluke. Will try again soon!

[AckerApple]

I'll be here if you need more help.

Special request: Please consider updating to a legit icon of yourself

[EvoSteven]

Righto, figured out more about my issue. (click) works, (markerClick) works also sort of.

The issue I had is that I was using (click) to show a window and (mapClick) on the to hide a window. These cancel out.

(markerClick) blocks (mapClick) from running, hence why the top left area works when using (markerClick). Just (click) does not prevent (mapClick) from running.

Also, I've heeded your request. Sorry for the inconvenience! 🙂

[EvoSteven]

If anyone else has this issue (mapClick still runs on click) and stumbles across this, this is how I solved it.

Using (click), pass along the event. Then call stopPropagation() on the event to prevent it from bubbling up the DOM.

In HTML: (click)="clickedOverlay($event)"

In Typescript: clickedOverlay($event){ $event.stopPropagation(); }

Still curious if we can either hide the cursor changing to the pointy hand in the top-left corner to make it consistent with the rest of the overlay, or to make it show for the entirety of the clickable part.

[AckerApple]

Good to be seeing you!

Thank you for the documentation. Glad you found your issue. Onward and upward

[lehne]

@EvoSteven I managed to make the cursor a pointer just by adding an inline style: cursor: pointer; It will only add when hovering over it. That said, I am still having issues with the clickable area. Did you solve that?

[EvoSteven]

Thank you, that is very helpful and something I didn't know!

As for my "solution", I currently employ both (markerClick) on the overlay and a regular (click) on the image residing in the marker. The issue being that there is still a 24x24 in the top-left corner of the overlay. I don't know how to fix this. Ideally, it shouldn't be there at all, or not be clickable (and thus blocking other click events). @lehne