gmap.js MouseOver event on an overlay? Is it possible?

Question

I'm using gmap.js and I'm trying to create a mouseover event on an overlay marker I created.

Heres a jsFiddle --> http://jsfiddle.net/LXv87/

Looking at the documentation - this is the most logical way I can think of trying to create a mouseOver event but its not working:

var map;
$(document).ready(function(){
  map = new GMaps({
    el: '#map',
    lat: 29.425967,
    lng: -98.486142,
    zoom:12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
    streetViewControl : false,
    mapTypeControl: false,
    overviewMapControl: false
  });

  map.drawOverlay({
    lat: 29.425967,
    lng: -98.486142,
    events: {
      mouseover:function() {
        alert("The Alamo");
      }
    },
    content: "<div class='masterpin bounce'></div><div class='pulse'></div>"
  });

});

Can anyone help?? Any advice is appreciated. Thanks!

.

Answer 1

One option would be to add onmouseover and onmouseout functions to the div that holds the overlay:

var map;
var infowindow = new google.maps.InfoWindow();

function mouseover() {
    infowindow.setContent("Mouse");
    infowindow.setPosition(new google.maps.LatLng(29.425967,-98.486142));
    infowindow.setOptions({pixelOffset:new google.maps.Size(-14,-16)});
    infowindow.open(map);
};
function mouseout() {
    infowindow.close();
};
$(document).ready(function () {
    map = new GMaps({
        el: '#map',
        lat: 29.425967,
        lng: -98.486142,
        zoom: 12,
        zoomControl: true,
        zoomControlOpt: {
            style: 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        overviewMapControl: false
    });

    map.drawOverlay({
        lat: 29.425967,
        lng: -98.486142
        },
        content: "<div class='masterpin bounce' onmouseover='mouseover();' onmouseout='mouseout();'></div><div class='pulse'></div>"
    });

});

Working fiddle

Answer 2

Rather than create a global function like the other answer suggestions, you can add the listener to the element when the overlay's ready event fires.

var overlay = map.drawOverlay({
  lat: 29.425967,
  lng: -98.486142,
  layer: 'overlayMouseTarget',
  content: '<div>my overlay</div>'
});

overlay.addListener('ready', function () {
  overlay.el.addEventListener('mouseover', function (e) {
    console.log("mouseover");
  });
});