Meteor with geocomplete npm not working

help
1

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"});
  $("#geo").geocomplete(); 
});

this does nothing.
What am I doing wrong here?

2

Try

$("#geo").geocomplete();
3

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

I also tried:

if(GoogleMaps.loaded()){
    $("#geo").geocomplete();
  }
4

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.

5

$(…).geocomplete is not a function

6

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?

7

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…

8

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);
});

Template.hello.onRendered(function(){
  var instance = this;
  instance.autorun(function(){
    if(Template.hello.googleReady.get())
      instance.$('#geo').geocomplete();
  });
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

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

GoogleMaps.init({
    'libraries':'places',
}, function(){
  Template.hello.googleReady.set(true);
});