6

I am using the pretty cool ng-map library for angular, and I want to know how to access the underlying Marker Object referenced by ng-map marker directive

So, I have this markup:

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

I haven't found a straight-forward way of accessing the Google Maps Marker Object during a on-click event in this case; 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,

jlstr
  • 2,986
  • 6
  • 43
  • 60
  • Are you sure: `on-click="pinClicked()"` corresponds to `$scope.pinTouched`. You are not calling the same function! – robe007 Oct 30 '15 at 22:49
  • Oops!, my bad. corrected. it's supposed to be the same method of course. – jlstr Oct 30 '15 at 22:55

2 Answers2

5

this is the answer to access the market object. It is the exactly the same as Google maps api, nothing is different. Again use this inside on-click function.

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

There are so many examples in testapp directory, those are useful when you find usage of 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

allenhwkim
  • 27,270
  • 18
  • 89
  • 122
  • Thank you, sir. Could you please illustrate a little bit further how would the controller function would look like? What the signature for the function inside the controller like? (Something like: pinClicked(marker){...}) ? – jlstr Oct 31 '15 at 03:12
  • Thank you very much, EXACTLY What I needed, sir! Keep up the great work! – jlstr Oct 31 '15 at 15:31
2

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

UPDATE: Does something like this plunkr works for you?

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

Community
  • 1
  • 1
robe007
  • 3,523
  • 4
  • 33
  • 59
  • Hi @robe007, I wish it was as easy as that, In your example you're choosing the first marker from an array of markers, (therefore, you keep a reference to the Marker object in that variable). In my case, I too have an Array of Markers but any of them can be clicked, not necessarily the first one. – jlstr Oct 30 '15 at 23:32
  • This is unfortunate, I wanted to avoid having to do what's on the answer you have just linked. Adding event listeners that way is messy. Thank you for your kind replies nonetheless! -Sincerely. – jlstr Oct 30 '15 at 23:38
  • I update my answer. Hope this could help you. Saludos ! – robe007 Oct 31 '15 at 05:49
  • Great answer! Since you have answered first than @allenhwkim, I will give you the 'Accepted' (even though his answer could be considered to be *better*) – jlstr Oct 31 '15 at 15:31
  • 1
    brilliant! had been struggling for sometime on this. – geeky_monster Jun 22 '17 at 09:36