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 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 mulitple markers. I couldn’t simply add a 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.

By Victor Leung

Experience in software development, consulting services and technical product management. Understanding of business and technology with an MBA in Finance and a Master degree in Computer Science. AWS Certified Solution Architect with experience in building products from scratch and serving as a charismatic leader.

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.