从 Meteor 模板注入 Javascript

Question

I'm pulling long, lat coords from my collection and I want to generate dynamic Google Map Markers onto the map in the page.

The data is populating fine in the source, but the markers fail to show on the page.

Is it possible to inject a javascript object into the <script></script> tags?

Javascript

  Template.maps.onRendered(function() {
    var map = new google.maps.Map(this.find('.map'), {zoom: 8, center: new google.maps.LatLng(33.658206, -111.962827)});
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  });

HTML

<template name="maps">
    <div id="map-canvas"></div>
 </template>

Answer 1

Don't mix html and js. Put all the javascript inside methods of relevant template.

Template.mapWrapper.onRendered(function() {
  var map = new google.maps.Map(this.find('.map'), {...});
  _.each(locations, function(location) {
    marker = new google.maps.Marker({...});
  });
});

You should also use classes or data parameters instead of element id, but most importantly, don't mix html and js.