Google Maps with Meteor and a reactive InfoWindow

Question

I have a google maps API v3 application for meteor that I'm currently working on. When a person clicks on a marker, it shows an infoWindow with some at-window-creation time static content.

What I would like to do is use a reactive template to render the infoWindow's contents, either directly as HTML which can change or by referring to a dom element that updates reactively.

I've verified that if I use an infoWindow to refer to a DOM element, and that element's contents change, the Maps API updates the on-screen window properly. However, I am having problems with two issues:

(1) Closing the window destroys the DOM element, so it would have to be re-created. This is possibly easy enough to handle with a "if it exists update it, else create it, insert it, and update it" process. (2) UI.render doesn't appear to be dynamic, so creating it, inserting it, and updating it is harder than it feels like it should be.

I am still an intermediate Meteor hacker, so forgive me if I'm making this too hard on myself.

Answer 1

For #1, make a clone: content: $('.stats').clone()[0] For #2, you'll need to create a dependency. The docs do a pretty good job of explaining it & without knowing your reactive data source catalyst I can't help too much more (I assume it's a Session var in the example). Oh, and if it's based on new entries from a collection, check out the .observe() function.

Template.name.created = function() {
  Session.set('stats',10);
  statsDep = new Deps.Dependency();
};

---

statsDep.depend();
var dropWindow = new google.maps.InfoWindow({
  content: $('.stats').clone()[0]
});

---

statsDep.changed();