MeteorJs googleMaps autocompletion - google-maps

Question

I have an app developed using MeteorJs and I am trying to include googleMaps autocompletion using this package
https://github.com/jshimko/meteor-geocomplete
I want to have autocompletion in two views one is the landing page which has a simple input field autocompletion field only and the other is a submit_property view which has an autocomplete + map input fields, the problem is that I have followed all the instructions available for implementing autocompletion but their seems to be something wrong with my code, due to the fact that auto-completion does not appear in my inputs.
Landing page HTML:
<template name="layoutLanding">
<header>
<title>Real Estate</title>
<link rel="stylesheet" type="text/css" class="" href="/css/bootstrap.css">
</header>
<main>
<div id="Header">
<div class="wrapper">
</div>
</div>
<div id="bg">
<img src="/img/48.jpg" class="big"/>
</div>
<div id="Content" class="wrapper">
<div class="countdown styled"><img src="/img/logo.png"/></div><br/>
<!-- <h2 class="intro">Our website is under construction. Stay tuned for something amazing!. Subscribe to be notified.</h2> -->
<div id="subscribe">
<form action="" method="post" onsubmit="">
<p>
<button type="button" id="select">Acheter</button>
<button type="button" id="select1">Louer</button>
</p>
<!-- Using 2 traingles to achieve border outline :) -->
<i id="triangle_down1" style="display: none"><i></i></i>
<i id="triangle_down" style="display: none"><i></i></i><br/>
<!--Louer triangles -->
<i id="triangle_down2" style="display: none"><i></i></i>
<i id="triangle_down3" style="display: none"><i></i></i><br/>
<div></div>
<p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
<input type="submit" id="main" value="Search"/>
</p>
</form>
</div>
</div>
<div id="overlay"></div>
</main>
</template>
Landing page JS
Template.layoutLanding.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#landing-entry').geocomplete();
}
});
});
Submit_property HTML
<!-- This file is quite big so i have just included where the autocompletion needs to be -->
<div class="clearfix"></div>
<hr>
{{> afQuickField name="address" id="geocomplete" placeholder="Type in an address"}}
<input id="find" type="button" class="btn btn-primary" value="Find Address" />
<div class="map_canvas"></div>
<hr>
submit_property JS
Template.submit_property.onRendered(function() {
this.autorun(function(){
if(GoogleMaps.loaded()){
$('#geocomplete').geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
}
});
});
Template.submit_property.events({
'click #find': function(){
$('#geocomplete').trigger('geocode');
}
});

Answer 1

It seems you forgot to include Google Maps API loading using GoogleMaps.load function:
if (Meteor.isClient) {
// Load the Google Maps API on startup
Meteor.startup(() => {
GoogleMaps.load({
key: '',
libraries: 'places'
});
});
Template.layoutLanding.onRendered(function () {
this.autorun(function () {
if (GoogleMaps.loaded()) {
$('#landing-entry').geocomplete();
}
});
});
}
meteor-geocomplete package utilizes Google Maps Places API
meteor-geocomplete package has a dependency to
meteor-google-maps package which in turn is used for Google Maps
API loading.