Ant Ant - 6 months ago 72
Javascript Question

Google maps custom overlay click event

I have integrated google maps into an ionic project and have applied a custom overlay to appear above the map marker to display the address of the marker location.

I have applied a click event listener to the map to detect any clicks and then clear and reapply a new marker for the new location. So far so good. I have applied ng-click attribute to the overlay div to then execute some code. This works too. The problem I have is that when clicking the overlay div, ng-click and map click event listener both fire, moving the marker. I want only the div listener to fire but can't seem to achieve this.

Am I missing something simple here?

Please see the following code and this codepen for a working example

I'm listening on the map like so:

$ = new google.maps.Map(document.getElementById("map"), mapOptions);

$'click', function(event) {

and do not have a listener on the marker div, rather I am using the ng-click attribute:

<div id="map" data-tap-disabled="true"></div>
<div id="customMapMarkerDiv" ng-click="choosePassportLocation(chosenPassport)"><i class="icon ion-plane"></i><h5> {{chosenPassport.address}}</h5></div>

Any help would be very much appreciated.


Ant Ant

The answer to this is to apply css to the marker div to set pointer events to auto.


pointer-events: auto;