how to trigger the google map event from inside the overlayview - google-maps-api-3

Question

In a application, I am using google map to display stations with google marker, because the google marker is static with icon not animated, so I decided to inherit OverlayView and use canvas to draw a station dynamically. And this works, however, I want this overlay to receive the google events like the marker, such as click, mouse over, mouse out...
For example,
function StationCanvas(map, position, name) {
this.map_ = map;
this.position_ = position;
this.name_ = name;
this.canvas_ = null;
this.labelDiv_ = null;
this.canvasWidth_ = 12;
this.canvasHeight_ = 50;
this.setMap(map);
console.log('canvas '+this.position_);
}
StationCanvas.prototype = new google.maps.OverlayView();
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.canvasWidth_);
canvas.setAttribute("height", this.canvasHeight_);
canvas.style.position = "absolute";
this.canvas_ = canvas;
var panes = this.getPanes();
panes.floatPane.appendChild(canvas);
this.labelDiv_ = document.createElement("div");
this.labelDiv_ .setAttribute("width", this.canvasWidth_);
this.labelDiv_ .setAttribute("height", this.canvasHeight_);
this.labelDiv_ .style.position = "absolute";
this.labelDiv_ .innerHTML = this.name_;
panes.floatPane.appendChild(this.labelDiv_ );
/////////////////////////////////////////////////////////////
this.listeners_ = [
google.maps.event.addListener(this.canvas_, "mouseover", function (e) {
//this.style.cursor = "pointer";
//google.maps.event.trigger(this, "mouseover", e);
console.log('mouse mover');
}),
google.maps.event.addListener(this.canvas_, "mouseout", function (e) {
//this.style.cursor = this.getCursor();
//google.maps.event.trigger(this, "mouseout", e);
console.log('mouse out');
}),
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
}),
google.maps.event.addListener(this.canvas_, "dblclick", function (e) {
//google.maps.event.trigger(this, "dblclick", e);
}),
];
}
Intially, I use google.maps.event.addListener as showed above to listen the event, nothing happens, so it seems canvas doesn't work with google.maps.eventListener.
Then I found google has provided a addDomListener(instance:Object, eventName:string, handler:Function), but since it only support dom rather then canvas, so when I used that listener, the browser breaks down.
At last, I have tried to use
canvas.onmouseout = function() {
console.log("on mouse out");
}
}
It is supposed to work, but still no, I guess something wrong within the code. even this works, the next question is how can I trigger the event to outside, so that I can work this overlayview like the google marker
var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13);
google.maps.event.addListener(test1, 'click', function(event){
console.log('test 1 click');
});

Answer 1

addDomListener works for me, even with <canvas/>
What would break your code is e.g. this:
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
})
this , when used in a event-callback, refers to the object that triggers the event(here: the canvas-node), your code produces a recursion. When you want to trigger the click-event for the StationCanvas-instance, you may store the instance as a property of the canvas-element, so it will be easy accessible inside the click-callback
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.overlay=this;
//more code
}
this.listeners_ = [
google.maps.event.addDomListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this.overlay,'click')
}),
google.maps.event.addListener(this, "click", function (e) {
alert('click on the StationCanvas-instance');
})
];