Ember: Consume Service in Component

I simply want to display my longitude on my app landing page/index/application.hbs. I am embarrassed to say how long I have been working at this! Can anyone help me?

//geoservice.js
import Ember from 'ember';

export default Ember.Service.extend({
    longitude: function(position){
        return position.coords.longitude;
    },
    latitude: function(position){
        return position.coords.latitude;
    }
});

//geo-component.js
import Ember from 'ember';

export default Ember.Component.extend({
    geoservice: Ember.inject.service(),
    myLongitude: function(){
            if (navigator.geolocation) {
                return this.get('geoservice').longitude(navigator.geolocation.getCurrentPosition());
            } else {
                return "Geolocation is not supported by this browser.";
            }
        }.on('init'),
});

//application.hbs
<h2 id="title">Welcome to Ember</h2>

{{outlet}}
{{geo-component.myLongitude}}