title: Need some guidance on Ember component functionality
body: <p>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. </p>
  
  <p>Code below:</p>
  
  <p>//routes/vineyard/index.js</p>
  
  <pre><code>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');
    }
  });
  </code></pre>
  
  <p>//controllers/vineyard/index.js</p>
  
  <pre><code>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) =&gt; {
          let currentLocation = this.get('geolocation').get('currentLocation');
          this.set('userLocation', currentLocation);
        }, (reason) =&gt; {
          // this.toggleProperty('failState');
          // $('.error').css('height', '220px');
          // $('.error &gt; 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);
      }
    },
  });
  </code></pre>
  
  <p>components/miles-away.js</p>
  
  <pre><code>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) =&gt; {
          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();
        });
      },
    }
  
  });
  </code></pre>
  
  <p>components/miles-away.hbs</p>
  
  <pre><code>{{#unless distanceLoading}}
    &lt;div class="miles-away-container"&gt;
      &lt;p class="miles-away"&gt;{{milesAway}}&lt;/p&gt;
    &lt;/div&gt;
  {{/unless}}
  {{yield}}
  </code></pre>
  
  <p>and finally, the template in which this is rendered..(just providing a snippet)</p>
  
  <p>templates/vineyard/index.hbs</p>
  
  <pre><code>   &lt;div class="distance"&gt;
            {{#if failState}}
              {{svg-jar 'fail'}}
            {{/if}}
            {{#if locationIsLoading}}
              {{location-loader}}
              {{else}}
              {{miles-away location=userLocation address=vineyard.location}}
            {{/if}}
          &lt;/div&gt;
  </code></pre>
  
  <p>I'm open to implementing this in a completely different way, I know it's not even close to proper or perfect.</p>