CODEWITHSUNDEEP
meteor
zbr
zbr

Reputation: 7037

Template.googleMap.rendered is not a function

I am very new to Meteor, trying to make my first project after the To-do list tutorial on the Meteor's website.

I want to put a Google Map on the website and am somewhat following this example - https://github.com/meteor/mobile-packages/tree/master/examples/solomo

However, I have a different project structure and it looks like this:

/client
    /googleMap
        googleMap.html
        googleMap.js
    head.html
    body.html

There are of course some other files and folders around that, but they are not important for this question.

Now to the respective files:

googleMap.html

<template name="googleMap">
  <div id="google-map"></div>
</template>

googleMap.js

var GoogleMap = function(container) {
  var lat = 0;
  var lng = 0;
  var mapOptions = {
    center: new google.maps.LatLng(lat, lng),
    zoom: 17
  };
  this.map = new google.maps.Map(container, mapOptions);
};

Template.googleMap.rendered(function() {
  var map = new GoogleMap(this.firstNode);
});

head.html

<head>
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js"></script>
</head>

body.html

<body>
  {{> googleMap}}
</body>

I expected (and hoped for) the Google Map to appear, but it doesn't and this error is printed to the console: Template.googleMap.rendered is not a function

I have tried moving the googleMap folder outside the client folder thinking that maybe the code needs to be executed on the server, but that leads to an even bigger problem appearing in the server's console: ReferenceError: Template is not defined

What am I doing wrong?

Upvotes: 0

Views: 116

Answers (1)

c.censier
c.censier

Reputation: 780

I think you should write :

Template.googleMap.rendered = function() {
   var map = new GoogleMap(this.firstNode);
}

Upvotes: 5

Related Questions