Como carregar de forma assíncrona um mapa do google em AngularJS?

Agora que encontrei uma maneira de inicializar o Google Maps com a ajuda deAndy Joslin neste SOinitialize-google-map-in-angularjs, Estou procurando uma maneira de carregar assíncrono um objeto do Google Map.

Eu encontrei um exemplo de como fazer isso nophonecat projeto.

Observe como os arquivos JS são carregados neste exemplo:index-async.html

Na minha parte do Jade Scripts que é carregada no meu programa eu tentei:

script(src='js/lib/angular/angular.js')
script(src='js/lib/script/script.min.js')

script
  $script([
    'js/lib/angular/angular-resource.min.js',
    'js/lib/jquery/jquery-1.7.2.min.js',
    'http://maps.googleapis.com/maps/api/js?key=AIzaSyBTmi_pcXMZtLX5MWFRQgbVEYx-h-pDXO4&sensor=false',
    'js/app.js',
    'js/services.js',
    'js/controllers.js',
    'js/filters.js',
    'js/directives.js',
    'bootstrap/js/bootstrap.min.js'
    ], function() {
      // when all is done, execute bootstrap angular application
      angular.bootstrap(document, ['ofm']);
    });

Quando faço isso e vou carregar a página do mapa eu recebo:

A call to document.write() from an asycrononously-loaded 
external script was ignored.

É assim que o Google Maps está sendo carregado agora como um serviço:

'use strict';

var app = angular.module('ofm.services', []);

app.factory('GoogleMaps', function() {

  var map_id  = '#map';
  var lat     = 46.87916;
  var lng     = -3.32910;
  var zoom    = 15;
  var map     = initialize(map_id, lat, lng, zoom);

  return map;
});

function initialize(map_id, lat, lng, zoom) {
  var myOptions = {
    zoom : 8,
    center : new google.maps.LatLng(lat, lng),
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  return new google.maps.Map($(map_id)[0], myOptions);
}

Parece que isso deveria estar retornando uma promessa do que me lembro de ter lido. Mas esse AngularJS é muito novo para mim.

questionAnswers(3)

yourAnswerToTheQuestion