CODEWITHSUNDEEP
javascriptgoogle-mapsmeteorgoogle-maps-api-3
CuriousFellow
CuriousFellow

Reputation: 215

Injecting Javascript From Meteor Template

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>

Upvotes: 1

Views: 62

Answers (1)

Hubert OG
Hubert OG

Reputation: 19544

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.

Upvotes: 1

Related Questions