Async Google Maps in AngularJS

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-init="working = true">
    <h1>Async Google Maps</h1>
    AngularJS works: {{working}}
    <property-map id="map-12345" lat="45.53315412" long="-73.61803162"></property-map>

  </body>

</html>

// Code goes here

(function() {
  'use strict';

  angular
    .module('myapp', [])
    .factory('mapsInit', mapsInitFactory)
    .directive('propertyMap', propertyMap);

    function mapsInitFactory($window, $q) {
        //Google's url for async maps initialization accepting callback function
        var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=',
            mapsDefer = $q.defer();
            
        //Callback function - resolving promise after maps successfully loaded
        $window.googleMapsInitialized = mapsDefer.resolve; // removed ()
        
        //Async loader
        var asyncLoad = function(asyncUrl, callbackName) {
            var script = document.createElement('script');
            //script.type = 'text/javascript';
            script.src = asyncUrl + callbackName;
            document.body.appendChild(script);
        };
        
        //Start loading google maps
        asyncLoad(asyncUrl, 'googleMapsInitialized');
        
        //Usage: Initializer.mapsInitialized.then(callback)
        return {
            mapsInitialized : mapsDefer.promise
        };
    }
    
    function propertyMap(mapsInit) {
        return {
            restrict: 'E',
            scope: {
                mapId: '@id', // map ID
                lat: '@',     // latitude
                long: '@'     // longitude
            },
            link: function(scope) {
                // Simple check
                console.log(scope.mapId, scope.lat, scope.long);
                // Check if latitude and longitude are specified
                if ( angular.isDefined(scope.lat) && angular.isDefined(scope.long) ) {
                    
                    // Initialize the map
                    var initialize = function() {
                        
                        var location = new google.maps.LatLng(scope.lat, scope.long);
                        
                        var mapOptions = {
                            zoom: 12,
                            center: location
                        };
                        
                        var map = new google.maps.Map(document.getElementById(scope.mapId), mapOptions);
                        
                        new google.maps.Marker({
                            position: location,
                            map: map
                        });
                    };
                    // Loads google map script
                    mapsInit.mapsInitialized.then(function () {
                        // Promised resolved
                        initialize();
                    }, function () {
                        // Promise rejected
                    });
                }
            }
        };

    }

})();

/* Styles go here */

h1 {
  display: block;
}

property-map {
  display: block;
  background-color: #fafafa;
  height: 500px;
  width: 100%;
}