CODEWITHSUNDEEP
angulargoogle-maps
Chaudhary Asghar Ali
Chaudhary Asghar Ali

Reputation: 48

Calling an Angular function from Google Map API InfoWindow

Here is my code

addMarker(){
    var infowindow = new google.maps.InfoWindow({
        content: '<button (click)="showJob()">show job</button>' 
    });

    const myLatlng = new google.maps.LatLng(this.features[i].latitude, this.features[i].longitude);
    const Marker = new google.maps.Marker({
        position: myLatlng,
        icon: this.icons[this.features[i].type].icon,
        map: this.map,
        animation: google.maps.Animation.DROP,
        title: this.features[i].title
    });

    Marker.addListener('click', function() {
        infowindow.open(this.map, Marker);
    });

}


showJob(){
    alert("showJobs");

}

I want to call method showJob() on click of show job button on infowindow but it's not working.

Upvotes: 0

Views: 836

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

showJobevent is defined in Angular2 component but info window html is not part of components template, that's the reason why showJob could not be triggered.

In this scenario showJob event could be bound to info window like this:

google.maps.event.addListener(infowindow, 'domready', () => {
  const el = document.querySelector('button');
  el.addEventListener('click', (event) => this.showJob(event));
});

Plunker

Upvotes: 2

Related Questions