Using Google Places Autocomplete with Meteor

Question

So I am trying to add the search bar of https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform to my Meteor app. First I needed to load the Google Places library. That link however also attempts to directly write to the DOM to grab another link. Meteor doesn't allow that so I decided to load the two js files like 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 that work? My next question is how do I initialize the autocomplete text field? The html in the corresponding template is simple.

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>

Now do I tried adding

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

to the Template.listingSubmit.rendered but nothing happens. I get a google not defined error. What went wrong?

Answer 1

I've been dealing with the same problem and just came across a solution. Here's what I did.

First, add the following package to your project with:

`mrt add googlemaps`

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

meteor add mrt:googlemaps

Next, create the following file: /client/lib/googlePlaces.js

Place the following code inside this js file:

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

Obviously replace the api key with your key! This code will initiate the call to the google api and download the places script to the client.

Now, to answer your question about how to get the autocomplete to work. Your HTML and js look fine, except for one thing. You need to wrap your js in a window.onload function so that it will wait for the google api script to be downloaded!

HTML

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>

JS

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

I haven't tested your HTML/JS but it looks very similar to mine.

Answer 2

Thought I'd share what finally worked for me
The package stays the same, but the js changed:

Template.myTemplateName.rendered = function () { 
    window.onload = function() { 

        input = document.getElementById('autocomplete'); 
        autocomplete = new google.maps.places.Autocomplete(input); 

        // When the user selects an address from the dropdown, 
        google.maps.event.addListener(autocomplete, 'place_changed', function() { 

             // Get the place details from the autocomplete object. 
             var place = autocomplete.getPlace(); 

             console.log("place: " + JSON.stringify(place) ); 
        }); 
    }; 
};