<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script data-require="underscore.js@1.5.*" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
<script type="text/javascript" data-require="angular-google-maps@*" data-semver="1.0.10" src="https://rawgit.com/nlaplante/angular-google-maps/1.0.18/dist/angular-google-maps.min.js"></script>
<style>.angular-google-map-container { height: 400px; }</style>
<script src="script2.js"></script>
</head>
<body ng-app="app" ng-controller="bla">
<div ng-if="showMap">
<google-map center="map.center" control="mapControlls" refresh="showMap" zoom="map.zoom"></google-map>
</div>
<button ng-click="showMap = true">Show map</button>
</body>
</html>
Documentation at [http://angular-google-maps.org/api](http://angular-google-maps.org/api) describes the refresh attribute.
This attribute should be an expression and whenever it evaluates to true the map should be refreshed.
I've looked thorugh the source of the google-map directive and didn't see any scope watches for this.
If the map is initially hidden, say an ng-show, when it is set to show it displays invorrectly and needs to be redrawn.
angular.module('app', ['google-maps'])
.controller('bla', function($scope) {
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8
};
$scope.mapControlls = {};
$scope.showMap = false;
$scope.$watch('showMap', function(newVal, oldVal) {
console.log('new value of showMap is ' + $scope.showMap);
if (newVal) {
$scope.mapControlls.refresh();
}
});
});