angular-google-maps map after call

http://stackoverflow.com/questions/25176723/

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<title>Angular Google Maps</title>

<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js'></script>
<script src='//rawgit.com/angular-ui/angular-google-maps/2.0.12/dist/angular-google-maps.js'></script>
    
<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        </ui-gmap-google-map>
    </div>
</body>

CSS

.angular-google-map-container {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

JavaScript

var myApp = angular.module('app', ['uiGmapgoogle-maps']);

myApp.config(function(uiGmapGoogleMapApiProvider) {
	uiGmapGoogleMapApiProvider.configure({
		key: '',
		v: '3',
		libraries: 'weather,geometry,visualization'
	});
});

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, myAppServices) {
    $scope.myCurrentLocation = {};

    myAppServices.getCurrentLocation()
	.then(function(myCurrentLocation){
        $scope.myCurrentLocation = myCurrentLocation;
    })
    .then(function(){return uiGmapGoogleMapApi})            // this is where the map load call is made
    .then(function(maps){
		$scope.map = {
			center: {        // set on San Francisco as initial default
				latitude: 37.7749295, 
				longitude: -122.4194155 
			},
			zoom: 13,
			pan: 1,
			options: myAppServices.getMapOptions().mapOptions,
		};
        $scope.map.center = $scope.myCurrentLocation
    })
});

myApp.service('myAppServices', function($http, $q, uiGmapGoogleMapApi) {
	/*
	 * Function to return map options - used in $scope.map in controller
	 */
	this.getMapOptions = function(){
		return{
			mapOptions : {
				minZoom : 3,
				zoomControl : false,
				draggable : true,
				navigationControl : false,
				mapTypeControl : false,
				scaleControl : false,
				streetViewControl : false,
				mapTypeId : google.maps.MapTypeId.ROADMAP,
				disableDoubleClickZoom : false,
				keyboardShortcuts : true,
				styles : [{
					featureType : "poi",
					elementType : "labels",
					stylers : [{
						visibility : "off"
					}]
				}, {
					featureType : "transit",
					elementType : "all",
					stylers : [{
						visibility : "off"
					}]
				}],
			}
		};
	};
    /*
	 * Function to return get current location
	 */
   this.getCurrentLocation = function(){
        var deferred = $q.defer();
        var myCurrentLocation = {};
        navigator.geolocation.getCurrentPosition(function(position) {
			console.log('position.coords :', position.coords);
    		myCurrentLocation = {
        ...