Using Google Places Autocomplete with Meteor -

so trying add search bar of https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform meteor app. first needed load google places library. link attempts directly write dom grab link. meteor doesn't allow decided load 2 js files this.

template.listingsubmit.rendered = function(){ if (!this.rendered){  var script = document.createelement("script");  script.type = "text/javascript";  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places";  document.body.appendchild(script);   var script = document.createelement("script");  script.type = "text/javascript";  script.src = "https://maps.gstatic.com/cat_js/maps-api-v3/api/js/17/13/%7bmain,places%7d.js";  document.body.appendchild(script);   this.rendered = true; } }; 

does work? next question how initialize autocomplete text field? html in corresponding template simple.

<div id="locationfield">   <input id="autocomplete" placeholder="enter address" type="text"> </div> 

now tried adding

var autocomplete = new google.maps.places.autocomplete(   (document.getelementbyid('autocomplete')),{types: ['geocode'] } ); 

to template.listingsubmit.rendered nothing happens. google not defined error. went wrong?

i've been dealing same problem , came across solution. here's did.

first, add following package project with:

`mrt add googlemaps` 

or, if you're using meteor >= 0.9:

meteor add mrt:googlemaps 

next, create following file: /client/lib/googleplaces.js

place following code inside js file:

googlemaps.init({   'sensor': false, //optional   'key': 'your api key here!', //optional   'language': 'en',  //optional   'libraries': 'places' }); 

obviously replace api key key! code initiate call google api , download places script client.

now, answer question how autocomplete work. html , js fine, except 1 thing. need wrap js in window.onload function wait google api script downloaded!

html

<div id="locationfield">   <input id="autocomplete" placeholder="enter address" type="text"> </div> 

js

window.onload = function() {   var autocomplete = new google.maps.places.autocomplete(     (document.getelementbyid('autocomplete')),{types: ['geocode'] }   ); }; 

i haven't tested html/js looks similar mine.