NgMap: Why are my markers (ng-repeat directive) passing through multiple parameters?

Question

I'm using the NgMap library to use the google maps api in my angular app.

I'm adding markers using an ng-repeat directive, each with an on-click tag that calls to the controller and logs to the console.

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    on-click="vm.showData(p)" //this is my on-click event, passing through the ng-repeated object
    title="pos: {{p.pos}}"></marker>
</ng-map>

For some reason, every time I pass a parameter to my controller function it's actually the marker object being passed through, not the argument I'm passing from the view.

 vm.showData = function (marker, param){
      console.log(marker) //WHY IS MARKER BEING PASSED THROUGH?!
      console.log(param.name); //THE SECOND ARGUMENT IS THE ONE I WANT, WHY ISN'T IT THE FIRST?
 }

Eventually after banging my head against the wall, I decided to check if any other arguments were being passed through to the controller function. Low and behold the second argument was the one I expected to be passed through to begin with.

Why isn't the first argument the one I'm expecting?! Is it something to do with the ngMap library, angular, or just a javascript nuance I'm unaware of?

A working plunker can be found here: https://embed.plnkr.co/TQpm4O/

Jimenemex · Accepted Answer · 2017-11-14T19:04:03.713

After some digging, it looks like its something intentional by NgMap. It's an event, not the marker itself.

From the Docs:

Events are applied to map, markers, and shapes. All event-related attributes are preceded by 'on-', i.e. on-click, on-mouseover, etc

As a side note, to get the actual Marker Object from NgMap, you can use this.

So your code can also look like this.

angular.module('ngMap').controller('MyCtrl', function() {
    var vm=this;
    vm.data =[
      {foo:1, bar:1},
      {foo:2, bar:2},
      {foo:3, bar:3},
      {foo:4, bar:4},
      {foo:5, bar:5},
      {foo:6, bar:6},
      {foo:7, bar:7}
    ];
    vm.positions =[
      {pos:[40.71, -74.21], name: "dave 1" },
      {pos:[40.72, -74.20], name: "dave 2" },
      {pos:[40.73, -74.19], name: "dave 3" },
      {pos:[40.74, -74.18], name: "dave 4" },
      {pos:[40.75, -74.17], name: "dave 5" },
      {pos:[40.76, -74.16], name: "dave 6" },
      {pos:[40.77, -74.15], name: "dave 7" }
    ];
    vm.showData = function (event){
      console.log(this.position.lat());
      console.log(this.position.lng());
      console.log(this.title);
    }
  });

<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <div ng-controller="MyCtrl as vm">
    <ng-map zoom="11" center="[40.74, -74.18]">
      <marker ng-repeat="p in vm.positions"
        position="{{p.pos}}"
        on-click="vm.showData()"
        title="pos: {{p.name}}"></marker> 
        <!-- Changed p.pos to p.name --> 
        <!-- You can even remove p from vm.showData() -->
    </ng-map>
  </div>
</body>
</html>

NgMap: Why are my markers (ng-repeat directive) passing through multiple parameters?

1 Answers1