ng-mouseover on ng-map marker doesn't fire

Question

I have an ng-map (using the popular ng-map library for implementing a Google map with angularjs):

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker ng-mouseover="mapsCtrl.handleMarkerMouseover({{loc}})"
        ...
</ng-map>

... however the mouseover doesn't fire. If I use on-mouseover it works, but then angular chokes on the JSON that is stored in 'loc'. How do I fix this? I'm wondering if I need a compile somewhere, however I don't want to hack ng-map and I don't see why a compile would be needed, but it's like maybe ng-mouseover inside the marker directive isn't being correctly compiled to an event that Google maps can recognise?

Answer 1

If I don't interpolate the JSON, Angular no longer chokes on it, so I can use on-mouseover, which works:

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker on-mouseover="mapsCtrl.handleMarkerMouseover(loc)"
        ...
</ng-map>

Answer 2

I know you've already answered your own question, but I've been struggling with this same problem and have some additional points!

The NgMap library is just a wrapper around the Google Maps API, this means that the events are still the same javascript events that are used by the API rather than the angular directives.

As you've discovered, one option is to use on-mouseover event, however one thing to note is that the first object that is passed back to your method will actually be the event itself (which also luckily contains the marker location) if you want the angular object it will actually be the second argument.

In your controller:

vm.positions = [
  {pos:[40.71, -74.21], name: "marker 1" },
  {pos:[40.72, -74.20], name: "marker 2" },
  {pos:[40.73, -74.19], name: "marker 3" },
];

//NOTE THE TWO ARGUMENTS FOR THIS METHOD
vm.myMethod = function (event, angularObj)
{
    console.log(event.latLng); //The Event contains the latLng
    console.log(angularObj.name)
}

And in your view:

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    /* NOTE THE USE OF ON-CLICK AND THE ANGULAR OBJECT BEING PASSED IN 
    THAT WILL ACTUALLY BE THE SECOND ARGUMENT FOR THE METHOD IN YOUR CONTROLLER */
    on-click="vm.logData(p)" 
    title="pos: {{p.pos}}"></marker>
</ng-map>

I have a plunk demonstrating this here: https://embed.plnkr.co/K5LZyF/