Untitled

<!DOCTYPE html>
<html lang="fr">

<head>
  <style>
    html,
    body {
      height: 100%;
    }
    
    .angular-google-map-container {
      height: 100vh;
    }
    
    div.btn {
      height: 2 5px;
      width: 50px;
      border: solid 1px black;
      text-align: center;
      line-height: 25px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-simple-logger/0.1.7/angular-simple-logger.js"></script>
  <script src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.js"></script>

</head>

<body>
  <script>
    var app = angular.module("app", ['uiGmapgoogle-maps']);
    app.controller("myCtrl", function($scope) {
      var $ctrl = this;
      $ctrl.map = {
        center: {
          latitude: 39.8282,
          longitude: -98.5795
        },
        zoom: 4
      };
      $ctrl.polygons = [];

      $ctrl.test = function() {

        if (!angular.isObject($ctrl.map) || !angular.isFunction($ctrl.map.draw)) {
          throw new Error(JSON.stringify($ctrl.map));
        }

        _.defer(function() {
          $ctrl.map.draw().then(function() {
            console.log(this);
            console.log($ctrl.polygons);
          });
        });
      };

    });
  </script>

  <div ng-app="app" ng-controller="myCtrl as $ctrl">
    <div class="btn" ng-click="$ctrl.test()">Test</div>
    <ui-gmap-google-map center='$ctrl.map.center' zoom='$ctrl.map.zoom' aria-label="Google map">
      <ui-gmap-free-draw-polygons polygons="$ctrl.polygons" draw="$ctrl.map.draw"></ui-gmap-free-draw-polygons>
    </ui-gmap-google-map>
  </div>
</body>

</html>

// Code goes here

/* Styles go here */