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.
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?
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
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');
},
},
});