Is there a way to create promise that resolves when Google Maps Javascript API is loaded?

Question

Google Maps Javascript API is supposed to be loaded this way:

<script>
  function initMap() {
    console.log('loaded');
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

If I had to answer my question, I'd do it like so:

var googleAPILoadedPromise = Promise.pending();
function initMap() {
  googleAPILoadedPromise.resolve();
}
googleAPILoadedPromise.promise.then(function() {
  console.log('loaded');
});

But deferreds are deprecated and possibly considered an anti-pattern, at least in bluebird. Is there any better way?

Answer 1

On second thought, I'd do it like this:

<script>
  var resolvePromise = null;
  var promise = new Promise(function(resolve, reject) {
    resolvePromise = resolve;
  });
  promise.then(function() {
    console.log('loaded');
  });
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=resolvePromise" async defer></script>