Meteor with geocomplete npm not working

I installed geocomplete npm

meteor npm install --save geocomplete

I’m also using the fantastic dburles:google-maps package.
I added input to the DOM with id=“geo” and I’m trying to use it as geocomplete:

<input id="geo">

Template.Map.onRendered(function() {
  GoogleMaps.load({ key: '<API KEY>',libaries:"places"});

this does nothing.
What am I doing wrong here?



Sorry this was a typo when I wrote the post. It is originally with the #.
I wish it was that simple…

I also tried:


Any errors in the browser console? Isn’t GoogleMaps.load a one time operation? Why do it every time your template renders? I use Meteor.startup() on the client for stuff like that.

$(…).geocomplete is not a function

well, that means the client doesn’t know about it then. Maybe it needs to be imported? I have never used that npm package. Maybe you should check if <script src="jquery.geocomplete.js"></script> is actually being inserted in the DOM?

it’s not there.
I tried using jeremy:geocomplete which states explicitly to use the npm directly. With this package I see the geocomplete script but it’s still not working…
I don’t really understand how simple tasks become so hard in Meteor…

Have you imported the jquery.geocomplete.js? I just created a quick test project and got it to work no problem like this. Also, mrt:googlemaps is needed

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import "geocomplete/jquery.geocomplete.js";

import './main.html';

Template.hello.googleReady = new ReactiveVar(false);
Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);

  var instance = this;

  counter() {
    return Template.instance().counter.get();
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);

}, function(){