Need some guidance on Ember component functionality - ember.js

Question

I'm currently leveraging ember-cli-geolocate along with ember-google-maps to provide users with the closest point of interest to their current location. I've got the code working in a component but have now realized that I'm not able to sort.
Code below:
//routes/vineyard/index.js
import Ember from 'ember';
import { later } from '#ember/runloop';
import { inject as service } from '#ember/service';
import $ from 'jquery';
const { Route, set } = Ember;
export default Route.extend({
model() {
return this.store.findAll('vineyard');
},
setupController(controller, model) {
set(controller, 'vineyards', model);
},
activate() {
this.controllerFor('vineyard/index').send('distanceFrom');
}
});
//controllers/vineyard/index.js
import Ember from 'ember';
import { inject as service } from '#ember/service';
import $ from 'jquery';
export default Ember.Controller.extend({
userLocation: null,
endLocation: null,
milesAway: null,
locationIsLoading: true,
failState: false,
googleMapsApi: service(),
geolocation: service(),
panelActions: Ember.inject.service(),
userLocationChanged: function () {
this.get('userLocation');
this.toggleProperty('locationIsLoading');
}.observes('userLocation'),
actions: {
distanceFrom: function() {
this.get('geolocation').trackLocation().then((geoObject) => {
let currentLocation = this.get('geolocation').get('currentLocation');
this.set('userLocation', currentLocation);
}, (reason) => {
// this.toggleProperty('failState');
// $('.error').css('height', '220px');
// $('.error > p').css('height', 'auto');
console.log('Geolocation failed because ' + reason);
});
},
stopError: function() {
this.toggleProperty('failState');
$('.error').css('height', '0');
$('.location-loader').animate({opacity: '0'}, 1000);
}
},
});
components/miles-away.js
import Component from '#ember/component';
import { inject as service } from '#ember/service';
import { later } from '#ember/runloop';
import $ from 'jquery';
export default Component.extend({
googleMapsApi: service(),
geolocation: service(),
userLocation: null,
endLocation: null,
milesAway: null,
distanceLoading: true,
errorState: false,
fadeClass: '',
didInsertElement() {
this.set('self', this);
var address = this.get('address');
var location = this.get('location');
var distanceLoading = this.get('distanceLoading');
var userLocationLat = location[0];
var userLocationLon = location[1];
let userLocation = '' + userLocationLat + ',' + userLocationLon
this.set('userLocation', userLocation);
this.set('endLocation', address);
this.send('getDistance');
},
actions: {
getDistance: function() {
// let milesAway = this.get('milesAway');
let userLocation = this.get('userLocation');
let endLocation = this.get('endLocation');
this._super(...arguments);
this.get('googleMapsApi.google').then((google) => {
var self = this;
let distanceMatrixService = new google.maps.DistanceMatrixService();
function calculateDistance() {
distanceMatrixService.getDistanceMatrix({
origins: [userLocation],
destinations: [endLocation],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
self.toggleProperty('errorState');
} else {
// var origin = response.originAddresses[0];
// var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
self.toggleProperty('errorState');
} else {
var distance = response.rows[0].elements[0].distance;
// var distance_value = distance.value;
var distance_text = distance.text;
// const miles = distance_text.substring(0, distance_text.length - 3);
self.toggleProperty('distanceLoading');
self.set('milesAway', distance_text);
later((function() {
$('.miles-away').addClass('fade-in');
}), 45);
}
}
}
calculateDistance();
});
},
}
});
components/miles-away.hbs
{{#unless distanceLoading}}
<div class="miles-away-container">
<p class="miles-away">{{milesAway}}</p>
</div>
{{/unless}}
{{yield}}
and finally, the template in which this is rendered..(just providing a snippet)
templates/vineyard/index.hbs
<div class="distance">
{{#if failState}}
{{svg-jar 'fail'}}
{{/if}}
{{#if locationIsLoading}}
{{location-loader}}
{{else}}
{{miles-away location=userLocation address=vineyard.location}}
{{/if}}
</div>
I'm open to implementing this in a completely different way, I know it's not even close to proper or perfect.