Alexander Schmidt Alexander Schmidt - 2 months ago 13
Javascript Question

How could I call a Angular2 function from a Google Map infowindow?

Google map is integrated the javascript way and I want to call a angular2 function inside an infowindow like the following code. Take a look at

for the button.

for (i = 0; i < locations.length; i++) {

let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
let infoContent = '<button (click)="myFunction(' + locations[i].id + ')">Details ...</button>';

marker = new google.maps.Marker({
position: locLatLng,

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(infoContent);, marker);
})(marker, i));


Unfortunately the angular click event
can't do it. There must be an other way. I would be very pleased if someone can point me to the right direction. Thanks in advance.


update (from comment)

You can do it with ElementRef and Renderer but that is not the problem. The problem is to get a reference (direct DOM element reference or ElementRef) of the button. You can inject private elRef:ElementRef and use this.elRef.nativeElement.querySelector('infowindow button') or similar but if you access elRef.nativeElement you're out of the realm of platform neutrality again because nativeElement should not be accessed directly, but with the limitation of the Renderer of only being able to call methods but never to get a result in return, there is only so much you can do.

I would use a method like shown in Trigger event with infoWindow or InfoBox on click Google Map API V3 and then check the if an element you are interested in was clicked.


If you want to access in the event handler you should use arrow functions instead

  google.maps.event.addListener(marker, 'click', ((marker, i) => { // <<<===
    return () => { // <<<===
      infowindow.setContent(infoContent);, marker);
  })(marker, i)

otherwise this. won't point to the current class instance