Incorporating Google Maps into an Ionic project, I have successfully added a custom overlay to display the address of a marker location on top of the map.
By adding a click event listener to the map, I can detect clicks and update the marker for new locations. Additionally, I have included an ng-click attribute to the overlay div to execute specific code when clicked. However, the issue arises when both the div listener and map click event fire simultaneously upon clicking the overlay div, causing the marker to move unintentionally. How can I ensure that only the div listener initiates without triggering the map click event as well?
Is there something simple that I am overlooking here?
Please refer to the provided code snippet below and visit this CodePen link for a functional demonstration: http://codepen.io/antonfire/pen/LGMqJz
The map listening implementation:
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map.addListener('click', function(event) {
placeMarker(event.latLng);
});
Rather than having a listener on the marker div, I am utilizing 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>
Your assistance in resolving this issue would be greatly appreciated.
Thank you