angular-google-maps

http://stackoverflow.com/questions/28247260

by Garth Edwards

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<title>Full Calendar Test</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.18',
		libraries: 'weather,geometry,visualization'
	});
});

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

    myAppServices.getCurrentLocation()
	.then(function(myCurrentLocation){
            console.log('myCurrentLocation', myCurrentLocation);
        $scope.myCurrentLocation = myCurrentLocation;
    })
    .then(function(){return uiGmapGoogleMapApi})
    .then(function(maps){
		console.log('maps', 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
        console.log('maps', maps.LatLngBounds);
   /*   this section of code won't run because maps is not defined at this point
        $scope.mapBounds = maps.Map.getBounds();
        $scope.center = $scope.mapBounds.getCenter();
	    $scope.currentLocation = {lat : $scope.center.lat(), lng : $scope.center.lng()};
        console.log('$scope.currentLocation', $scope.currentLocation);
   */     
  		console.log('function i want to run ONCE after initial map load...');
    })
});

myApp.service('myAppServices', function($http, $q, uiGmapGoogleMapApi) {
	/*
	 *...