google maps - MeteorJs googleMaps autocompletion -

i have app developed using meteorjs , trying include googlemaps autocompletion using package

https://github.com/jshimko/meteor-geocomplete

i want have autocompletion in 2 views 1 landing page has simple input field autocompletion field , other submit_property view has autocomplete + map input fields, problem have followed instructions available implementing autocompletion seems wrong code, due fact auto-completion not appear in 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 under construction. stay tuned amazing!. subscribe 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 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"/>                         <a href="/results"> <input type="submit" id="main" value="search"/></a>                     </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

<!-- file quite big have included autocompletion needs -->  <div class="clearfix"></div>    <hr>      {{> afquickfield name="address" id="geocomplete"  placeholder="type in 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');     } }); 

it seems forgot include google maps api loading using googlemaps.load function:

if (meteor.isclient) {       // load 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 dependency meteor-google-maps package in turn used google maps api loading.