Ant Ant - 1 year ago 135
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 http://codepen.io/antonfire/pen/LGMqJz

I'm listening on the map like so:

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


$scope.map.addListener('click', function(event) {
placeMarker(event.latLng);
});


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.

Thanks

Ant Ant
Answer Source

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

CSS:

pointer-events: auto;