Events are not being triggered when using Template.myTemplate() in Meteor - google-maps

Question

I'm trying to catch a click button event inside a google maps InfoWindow. To do so I have the following
<!-- Html file -->
<template name="infoWindowContent">
<button>Click Me!</button>
</template>
Then I have this on the client.js
//Client js file
//Function that renders the template. Gets called from a user's action
function showInfoWindow(map, marker) {
var infoWindow = new google.maps.InfoWindow();
//This is the line that generates the template's html
var infoWindowHtmlContent = Template.infoWindowContent();
infoWindow.setContent(infoWindowHtmlContent);
infoWindow.open(map, marker);
}
//Template events
Template.infoWindowContent.events = {
'click button': function(event){
console.log('event was triggered', event);
}
}
The infoWindow is shown on the map and it contains the button, but when the button is clicked no log is displayed in the console. Any clue on this? How can I catch an event dispatched by some element rendered using Template.myTemplate()?

Answer 1

Function Template.template() returns plain html string. It doesn't have any Meteor properties enabled. What you need is a DOM element with proper behavior injected.
...
var node = Meteor.render(Template.infoWindowContent());
outerElement.appendChild(node);
...
I'm not sure how to use DOM node in google maps api, but if it's possible, it should be easy.
Also, use the proper events form, it saves much trouble in the long run:
Template.infoWindowContent.events({
...
});