CODEWITHSUNDEEP
google-mapsautocompletemeteor
hujh14
hujh14

Reputation: 111

Using Google Places Autocomplete with Meteor

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?

Upvotes: 11

Views: 4086

Answers (3)

Gabriel Garrett
Gabriel Garrett

Reputation: 2127

This is the solution that finally worked for me: I added the mrt:googlemaps package.

Then I setup the googlePlaces.js like so:

GoogleMaps.init({
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en',  //optional
'libraries': 'places'
 });

Then I set up a variable for each input field that was going to use the autocomplete API, and set the template.render equal to that, like so:

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

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

Template.userUpdate.rendered = initAutoCompleteProfile;

Template.postSubmit.rendered = initAutoCompletePost;

The element ID was "autocomplete" for each element that was going to use it, but what really matters most is that you make a variable for each element that is going to use it for each template, and then set that template's rendered equal to that variable.

Question/Solution here: Meteor Google Maps Autocomplete only works once on multiple templates

Upvotes: 1

Ajar
Ajar

Reputation: 1051

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

Upvotes: 6

Adam
Adam

Reputation: 3288

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.

Upvotes: 7

Related Questions