Need help with Google Maps Autocomplete


#1

I am having users submit a form. I would like to use Google autocomplete for a location field. I installed ember-cli-gmaps. Here is the documentation: http://matt-jensen.github.io/ember-cli-g-maps/#/place-autocomplete/index

    A closure action must be passed to on-select. Expect this action to be triggered when the user enters an address and selects an autocomplete option. Your closure action should take as param, an object like { lat: -49, lng: -123, place: place}. place is a PlaceResult object.

Example
 {{g-autocomplete value=address on-select=(action "didUpdatePlace") on-select-error=(action "invalidUserSelection")}}

What action should go in didUpdatePlace in my controller to save this? For example, right now, if I just start typing Oma and select Omaha, NE, it only saves Oma and submits it.


#2
    import Controller from '@ember/controller';

export default Controller.extend({
    actions: {
        didUpdatePlace: function(place) {
          
         console.log(place.lat);
        },
        publishJob: function() {
          
     
          var newJob = this.store.createRecord('job', {
            title: this.get('title'),
            company: this.get('company'),
            description: this.get('description'),
            location: this.get('location')
          });
          newJob.save();
          this.transitionToRoute('jobs');
        },
      },
    });

I’ve made some headway. Here is my code. I can console log place.lat and it passes what I need. How can I send this value to the publishJob function?


#3

I’d move publishJob outside of the actions hash and then call it from didUpdatePlace with this.publishJob(...)

EDIT: generally I think a good way to think about actions is that actions should be for anything triggered by user interaction or a component. Any other logic/functions/computed properties/properties/etc. go on the base controller/component/route


#4

Thanks. I will probably refactor. I got it working with this, through a lot of trial and error.

import Controller from '@ember/controller';

export default Controller.extend({
    actions: {
        didUpdatePlace: function(place) {
         location: this.set('location', place.place.formatted_address);
         lat: this.set('lat', place.lat);
         long: this.set('long', place.lng);
        
        },
        publishJob: function() {
          
          var newJob = this.store.createRecord('job', {
            title: this.get('title'),
            company: this.get('company'),
            description: this.get('description'),
            location: this.get('location'),
            lat: this.get('lat'),
            long: this.get('long')            
          });
          newJob.save();
          this.transitionToRoute('jobs');
        },
      },
    });