Ant Ant - 3 months ago 38
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

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

CSS:

pointer-events: auto;