angular-google-maps - uiGmapIsReady
http://stackoverflow.com/questions/28247260
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 +...