CODEWITHSUNDEEP
google-maps-api-3overlay
user824624
user824624

Reputation: 8066

how to trigger the google map event from inside the overlayview

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');
    });

Upvotes: 1

Views: 3934

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

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');
    })    
  ];

Upvotes: 3

Related Questions