16056

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.

Answer1:

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(); }; <hr />statsDep.depend(); var dropWindow = new google.maps.InfoWindow({ content: $('.stats').clone()[0] }); <hr />statsDep.changed();

Recommend

  • Add-In Commands Ribbon shows in Excel Online but not in Excel for Windows
  • Getting SerializeObject to use JsonProperty “name” defined inside interface
  • Why is this jQuery reference '$(“”)' instead of '$(“”)'?
  • What do internal compiler error messages mean, and what can I do?
  • Execute a piece of code from the data-section
  • Why does an array get passed by value some times and not others?
  • Which devices/recommended sizes should I target with mediaqueries?
  • Java : Simple XML not parsing the xml. Gives Exception
  • QTP UFT Unable to find row count from table
  • get src attribute of an image based on class or id
  • How to change the default configuration files used in bootstrapping of reactJs through npm
  • when does setTimeout start executing in a inline
  • Lua: Line breaks in strings
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • Google Maps api v3 get start and end coordinates of a street
  • Why isn't obj.style.left = “200px”; working in this code?
  • Application level floating views with navigation in Android
  • CXF JAXB JAXBEncoderDecoder unmarshalling error : unexpected element when having qualified elements
  • Is there a way to save the selected text and highlight it again once the page is refreshed?
  • Hide HTML elements without javascript, only CSS
  • UIAlertController button function not working
  • SonarQube: Cannot deactivate rule with missing quality profile
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Python pickle not one-to-one: different pickles give same object
  • How to add a focus style to an editable ComboBox in WPF
  • AndEngine Applying Transparancy to AndEngine View
  • Android Google Maps API v2 start navigation
  • Diff between two dataframes in pandas
  • Using a canvas object in a thread to do simple animations - Java
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Refering to the class itself from within a class mehod in Objective C
  • D3 nodes and links from JSON with nested arrays of children
  • Avoid links criss cross / overlap in d3.js using force layout
  • Jenkins: How To Build multiple projects from a TFS repository?
  • Weird JavaScript statement, what does it mean?
  • How to format a variable of double type
  • using HTMLImports.whenReady not working in chrome
  • Django query for large number of relationships