CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
CaptainMorgan
CaptainMorgan

Reputation: 1251

AngularJS ngMap parameters on-click event

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);
        };

Upvotes: 3

Views: 3095

Answers (3)

Venkat
Venkat

Reputation: 551

I used below code to get Latitude and Longitude of clicked marker.

 <ng-map zoom="12" center="{{vm.geoCenterLoc}}" style="height:500px">
            <marker ng-repeat="p in vm.positions"
                    position="{{p.pos}}"
                    data="{{data[$index]}}"
                    on-click="myFunc($event)";
                    title="pos: {{p.pos}}"></marker>
   </ng-map>

Javascript(on my controller):

$scope.myFunc = function (evt) {

            markerPosObj = {
                pos: [this.getPosition().lat(), this.getPosition().lng()]
            };
            markerPos = [];
            markerPos.push(markerPosObj);
            console.log('this marker', markerPos);
        }

Upvotes: 0

jithin
jithin

Reputation: 1482

"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>

Upvotes: 2

Vineet
Vineet

Reputation: 4645

You should use in function 

$scope.goAnchor = function (event) {
   console.log(event.target.attributes.id.value);
   gotoAnchor(event.target.attributes.id.value);
};

Mark Up

<marker ng-repeat="marker in markers" position="{{marker.latitude}}, {{marker.longitude}}" icon="{{marker.icon}}" id="{{marker.id}}" on-click="goAnchor($event)"></marker>

Upvotes: 0

Related Questions