I'm attempting to use this Angular Google map directive http://ngmap.github.io/. I would like to add a click event to each marker, which calls a function in the controller, passing through the marker's id. When I print out the id in the console, I get "hq {latLng: wf, ub: undefined, pixel: undefined, xa: undefined}", which isn't the id. My HTML is
<map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}">
<marker ng-repeat="marker in markers" position="{{marker.latitude}}, {{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor(marker.id)"></marker>
</map>
My controller code:
$scope.goAnchor = function (id) {
console.log(id);
gotoAnchor(id);
};
"this" returns the marker clicked by you
$scope.goAnchor = function (event) {
console.log(this.id);
gotoAnchor(this.id);
};
HTML
<marker ng-repeat="marker in markers" position="{{marker.latitude}},{{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor($event)"></marker>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With