Need some guidance on Ember component functionality

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. Been stuck on this a few days and could use some guidance, could also be helpful for those in the future that plan on doing something similar. 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

  <div class="miles-away-container">
    <p class="miles-away"></p>
  </div>

and finally, the template in which this is rendered..(just providing a snippet)

templates/vineyard/index.hbs

   <div class="distance">
          
            
          
          
            
            
            
          
        </div>

I'm open to implementing this in a completely different way, i know it's not even close to proper or perfect. Hoping to get some answers and insight...thanks.