<!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();
      }
    });
  });