angular-google-maps - uiGmapIsReady

http://stackoverflow.com/questions/28247260

by Garth Edwards

HTML

<title>Angular Google Maps</title>

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js'></script>
<script src='//rawgit.com/nmccready/angular-simple-logger/0.1.5/dist/angular-simple-logger.light.js'></script>
<script src='//rawgit.com/angular-ui/angular-google-maps/2.2.1/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, uiGmapIsReady) {
    $scope.myCurrentLocation = {};
    
    var initialMapLoad = 0;

    myAppServices.getCurrentLocation()
	.then(function(myCurrentLocation){
        $scope.myCurrentLocation = myCurrentLocation;
    })
    .then(function(){return uiGmapGoogleMapApi;})
    .then(function(maps){

		$scope.googlemap = {};
		$scope.map = {
			center: {        // set on San Francisco as initial default
				latitude: 37.7749295, 
				longitude: -122.4194155 
			},
			zoom: 13,
			pan: 1,
			options: myAppServices.getMapOptions().mapOptions,
			control: {},
			events: {
				tilesloaded: function (maps, eventName, args) {
					console.log('The ' + eventName + ' function fires every time you move or zoom the map');
				},
				dragend: function (maps, eventName, args) {
					console.log('The ' + eventName + ' function fires every time you drag the map');
				},
				zoom_changed: function (maps, eventName, args) {
					console.log('The ' + eventName + ' function fires every time you zoom');
				}
			}
		};
        $scope.map.center = $scope.myCurrentLocation;
    });
    
    uiGmapIsReady.promise()					    // this gets all (ready) map instances - defaults to 1 for the first map
    .then(function(instances) {					// instances is an array object
        var maps = instances[0].map;			// if only 1 map it's found at index 0 of array
    	$scope.myOnceOnlyFunction(maps);        // this function will only be applied on initial map load (once ready)
    });
    
    $scope.myOnceOnlyFunction = function(maps){
        var center = maps.getCenter();
        var lat = center.lat();
        var lng = center.lng();
        alert('I\'ll only say this once ! \n Lat : ' + lat +...