Using geocomplete in Meteor App

Question

Please I quickly need a fix to this. I have been trying to add geocomplete to my Meteor js app but keeps getting errors. I have installed geocomplete via NPM into the Meteor app. How do I use it from there? Or is there any other Meteor package that has implemented this because I have none. I have tried following this implementation http://ubilabs.github.io/geocomplete/examples/form.html but could not get it to work.

This is the UI code

<template name="geos">
    <div class="form-group">
        <input id="geocomplete" type="text" class="form-control" placeholder="Type in an address" value="Lekki Phase" style="width: 100%;" />
    </div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWz0jrRG2GoQ&libraries=places"></script>
<script src="/js/jquery.geocomplete.js"></script>
</template>

NPM install

C:\Programs\contract\schoolapps>npm install geocomplete
npm WARN deprecated uglifyjs@2.4.11: uglifyjs is deprecated - use uglify-js instead.
npm WARN prefer global marked@0.3.6 should be installed with -g
schoolapps@ C:\Programs\contract\schoolapps
`-- geocomplete@1.7.0
  +-- docco@0.6.3
  | +-- commander@2.9.0
  | | `-- graceful-readlink@1.0.1
  | +-- fs-extra@3.0.1
  | | +-- graceful-fs@4.1.11
  | | +-- jsonfile@3.0.0
  | | | `-- graceful-fs@4.1.11  deduped
  | | `-- universalify@0.1.0
  | +-- highlight.js@9.11.0
  | +-- marked@0.3.6
  | `-- underscore@1.8.3
  `-- uglifyjs@2.4.11

This is the onrendered function

Template.SchoolContactLayout.rendered = function () {
    $(function(){
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });
}

I got this error on the console

Exception from Tracker afterFlush function:
meteor.js?hash=27829e9…:930 TypeError: $(...).geocomplete is not a function
    at HTMLDocument.<anonymous> (schoolcontact.js:25)
    at fire (jquery.js?hash=c57b3cf…:3201)
    at Object.self.add [as done] (jquery.js?hash=c57b3cf…:3247)
    at jQuery.fn.ready (jquery.js?hash=c57b3cf…:3481)
    at jQuery.fn.init (jquery.js?hash=c57b3cf…:2921)
    at jQuery (jquery.js?hash=c57b3cf…:131)
    at Template.SchoolContactLayout.rendered (schoolcontact.js:2)
    at blaze.js?hash=f33d3df…:3398
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
    at fireCallbacks (blaze.js?hash=f33d3df…:3394)

what do i do to get this working?

Answer 1

Try this and tell me if it works

Template.SchoolContactLayout.onCeated(function () {
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });

Answer 2

You are getting the error because its not able to find the dom and its considering it as a meteor function. You should call the method once the dom is rendered and use a 'this' keyword before to point to template instance in which the dom exists for jquery to consider it.

Template.SchoolContactLayout.onRendered(function(){
  // we're using the template instance scoped jQuery

this.$("#geocomplete").geocomplete({

      map: ".map_canvas",
      details: "form",
      types: ["geocode", "establishment"]
  });
});

Confirm back if it works for you.