How do I deal with an Ember component that needs third-party javascript that I want to load async?

I want to load the google maps API. Normally I would do this:

<script>function readyGoogleMaps(){/* stuff */}</script>
<script async defer src="http://ift.tt/1K5l4s8"></script>

In Ember I've instead created two components. One which loads google maps and one which renders google maps after it's loaded.

/components/google-map.js

import Ember from 'ember';

export default Ember.Component.extend({
  mapsLoaded: false,
  init(){
    this._super(...arguments);
    window.readyGoogleMaps = () =>{
      delete window.readyGoogleMaps;
      this.set('mapsLoaded', true);
      console.log("Loaded");
    };
    Ember.$.getScript("http://ift.tt/1K5l4s8");
  }
});

/components/real-google-maps.js

import Ember from 'ember';

export default Ember.Component.extend({
  map: null,
  didInsertElement(){
    const map = new google.maps.Map(this.$()[0], {
    });
    this.set('map', map);
  }
});

This is of course not ideal, because google maps don't start loading until the component is rendered and I end up having to glue my component. How should a component in Ember deal with needing third-party javascript that I can't be sure is available when the component is called?