How to use router navigate on Google custom overlay in angular2?

Question

I have used the Google custom overlay and created a div. Now I want to navigate to some other route on overlay click. Please suggest how can I use the router navigation in Angular2?

onAdd() {

    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.setAttribute('class', 'circle-box');
    div.className+=' '+this.pointData_.colour.toLowerCase().trim() + '-style';
    div.innerHTML = this.createTemplate();
    this.div_ = div;
    // Add the element to the "overlayImage" pane.
    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(this.div_);

    var me = this;
    google.maps.event.addDomListener(this.div_, 'click', function () {
     // use router navigate
    });

};

Answer 1

I guess the main problem is that you're using function() { ... } instead of `() => {}

google.maps.event.addDomListener(this.div_, 'click', () => {
  this.router.navigate(...);
});