AngularUI: Mouseover event for Google maps markers

The problem:

It took me awhile to figure this out, so I think it probably deserves a blog post to explain the issue. I was a bit confused on how to hookup the mouseover events with google map markers and the AngularUI documentation is pretty vague about how to do that. It is only supported for a marker, not for markers.

For a single marker, it is intuitive to specify a directive with events property in the HTML:

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

And then in the controller,

$scope.marker = { 
  events: { 
    mouseover: function (marker, eventName, args) { 
    // Callback 
    } 
  } 
};

However, it doesn’t work the same for multiple markers. I couldn’t simply add mouseover events on each marker like this:

markers.push({ 
  events: { 
    mouseover : function(mapModel, eventName, originalEventArgs) {
      console.log("i'd really like to show the info window on mouseover"); 
    } 
  } 
});

My Solutions:

Add the following to the HTML markers directive:

events="clickEventsObject"

And in the controller:

$scope.clickEventsObject = { 
  mouseover: markerMouseOver, 
  mouseout: markerMouseOut 
}; 

function markerMouseOver(marker, e) { 
  //Callback 
} 

function markerMouseOut(marker, e) { 
  //Callback 
}

It works! This handler returns a directly mapped array of the models which belong to gMarker cluster sent along. Let me know if you have any questions ☺

Originally published at victorleungtw.com on January 6, 2015.