AngularJS ngMap parameters on-click event

Question

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

jithin · Accepted Answer · 2015-10-15 09:54:16Z

2

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

answered Oct 15, 2015 at 9:54

jithin

1,4822 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nirav Gandhi Over a year ago

how do you access scope variable inside such callback functions? I get it as undefined.

Vineet · Accepted Answer · 2015-08-27 05:57:55Z

0

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>

edited Aug 27, 2015 at 5:57

answered Aug 27, 2015 at 5:40

Vineet

4,7153 gold badges25 silver badges42 bronze badges

5 Comments

CaptainMorgan Over a year ago

That's what I thought, but the documentation shows on-click. ngmap.github.io/events.html# I tried ng-click and that doesn't even call the controller, on-click does.

Vineet Over a year ago

I never see on-click. But I guess to pass the function's value in controller's $scope we need to use it's predefined directives.

CaptainMorgan Over a year ago

Still no luck. Uncaught TypeError: Cannot read property 'attributes' of undefined

Vineet Over a year ago

@user1024941 My Bad. Please check my edited answer. I forgot to pass $event in on-click

Vineet Over a year ago

Let us continue this discussion in chat.

Venkat · Accepted Answer · 2016-03-11 21:25:44Z

0

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

answered Mar 11, 2016 at 21:25

Venkat

5517 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS ngMap parameters on-click event

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related