Geek Answers Handbook

Ng-map: How can I get a Marker object when I click on it?

I use a pretty cool ng-map library for angular and I want to know how to access the base Marker object referenced by the ng-map marker directive

So I have this markup:

<div id="map-search" data-tap-disabled="true"> <map zoom="15" disable-default-ui="true"> <marker ng-repeat=" pos in positions" position="{{pos.latitude}}, {{pos.longitude}}" id="{{pos.index}}" on-click="pinClicked()"> </marker> </map> </div>

In this case, I did not find a direct way to access the Google Maps Marker object. From the controller:

  app.controller('MapSearchController', function($scope) { $scope.$on('mapInitialized', function(event, map) { $scope.map = map; //Assume existence of an Array of markers $scope.positions = generatePinPositionsArray(); }); $scope.pinClicked = function(event, marker) { console.log('clicked pin!'); //HOW CAN I GET THE MARKER OBJECT (The one that was clicked) HERE? console.log('the marker ->', marker); //prints undefined }; });

Thanks in advance,

+6
source share
2 answers

You need to create an array of markers! This is (in my opinion) the only way. See here

UPDATE : Does something like this plunkr work for you?

The idea is to pass a marker to the on-click="pinClicked(this)" event. And then you can catch it later on the controller: $scope.pinClicked = function(events, marker) {...}

+2
source

this is a response to access to a market object. This is exactly the same as the Google maps api, nothing has changed. Use this again inside the click function.

------ EDIT -----

There are so many examples in the testapp directory that are useful when you find using ng-map.

 $scope.foo = function(event, arg1, arg2) { alert('this is at '+ this.getPosition()); alert(arg1+arg2); }

Example:

https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/events.html

+5
source

More articles:


All Articles