title: How to asynchronously load a google map in AngularJS?
body: <p>Now that I have found a way to initialize Google Maps with the help of <a href="https://stackoverflow.com/users/1397051/andy-joslin">Andy Joslin</a> in this SO <a href="https://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs">initialize-google-map-in-angularjs</a>, I am looking for a way to asynchronous load a Google Map Object.</p>
  
  <p>I found an example of how to do this in the <a href="https://github.com/angular/angular-phonecat" rel="nofollow noreferrer">phonecat</a> project.</p>
  
  <p>Notice how the JS files are loaded in this example: <a href="https://github.com/angular/angular-phonecat/blob/00a07064623f1c0df7e03c5e38aa976695b5c899/app/index-async.html" rel="nofollow noreferrer">index-async.html</a></p>
  
  <p>In my Jade Scripts partial that is loaded into my program I tried:</p>
  
  <pre><code>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&amp;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']);
      });
  </code></pre>
  
  <p>When I do this and go to load the map page I get:</p>
  
  <pre><code>A call to document.write() from an asycrononously-loaded 
  external script was ignored.
  </code></pre>
  
  <p>This is how Google Maps is being loaded now as a service:</p>
  
  <pre><code>'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);
  }
  </code></pre>
  
  <p>It appears that this should be returning a promise from what I recall reading. But this AngularJS is very new to me.</p>