Victor Leung
Victor Leung
BlogFlower shop

AngularUI: Mouseover event for Google maps markers

February 20, 2015

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=""></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:

      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:


And in the controller:

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

    function markerMouseOver(marker, e) {

    function markerMouseOut(marker, e) {

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

About Victor Leung

Software development professional with expertise in application architecture, cloud solutions deployment, and financial products development. Possess a Master's degree in Computer Science and an MBA in Finance. Highly skilled in AWS (Certified Solutions Architect Professional, Developer and SysOps Administrator), GCP (Professional Cloud Architect), Microsoft Azure, Kubernetes(CKA, CKAD, CKS, KCNA), and Scrum(PSM, PSPO) methodologies.

Happy to connect

Continuous improvement

Copyright © 2023.