title: How to draw a polygon using angular-google-maps in mvc5
body: <p>Working on angular-google-maps for the first time. I am confused how to draw a polygon and grab all of the zip codes in that region. And I have no idea how to do this. Following is my code </p>
  
  <pre><code>&lt;div ng-app="myapp" ng-controller="mapsController"&gt;
      &lt;!--It displays the markers links--&gt;
      &lt;div class="locations"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"&gt;&lt;a href="#"&gt;{{l.Title}}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="maps"&gt;
          &lt;!-- Add directive code (gmap directive) for show map and markers--&gt;
          &lt;ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom"&gt;
              &lt;ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"&gt;
                  &lt;ui-gmap-window options="windowOptions" show="windowOptions.show"&gt;
                      &lt;ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"&gt;&lt;/ui-gmap-drawing-manager&gt;
                  &lt;/ui-gmap-window&gt;
              &lt;/ui-gmap-marker&gt;
          &lt;/ui-gmap-google-map&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my script.js i have written the following code </p>
  
  <pre><code>var app = angular.module('myapp', ['uiGmapgoogle-maps']); //dependency we should add to angular application
  app.controller('mapsController', function ($scope, uiGmapGoogleMapApi) {
      //this is default coordinates for the map when it loads for first time
      $scope.map = {
          center: {
              latitude: 41.850033,
              longitude: -87.6500523
          },
          zoom: 4,
          polygons: [],
          isDrawingModeEnabled: true,
          bounds: {}
      };
      $scope.markers = [];
      $scope.locations = [];
  
      $scope.windowOptions = {
          show: true
      };
      $scope.options = {
          scrollwheel: false
      };
  
  
      uiGmapGoogleMapApi.then(function (maps) {
          $scope.drawingManagerOptions = {
              drawingMode: google.maps.drawing.OverlayType.MARKER,
              drawingControl: true,
              drawingControlOptions: {
                  position: google.maps.ControlPosition.TOP_CENTER,
                  drawingModes: [
                    google.maps.drawing.OverlayType.MARKER,
                    google.maps.drawing.OverlayType.CIRCLE,
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.POLYLINE,
                    google.maps.drawing.OverlayType.RECTANGLE
                  ]
              },
              circleOptions: {
                  fillColor: '#ffff00',
                  fillOpacity: 1,
                  strokeWeight: 5,
                  clickable: false,
                  editable: true,
                  zIndex: 1
              }
          };
          $scope.markersAndCircleFlag = true;
          $scope.drawingManagerControl = {};
          $scope.$watch('markersAndCircleFlag', function () {
              if (!$scope.drawingManagerControl.getDrawingManager) {
                  return;
              }
              var controlOptions = angular.copy($scope.drawingManagerOptions);
              if (!$scope.markersAndCircleFlag) {
                  controlOptions.drawingControlOptions.drawingModes.shift();
                  controlOptions.drawingControlOptions.drawingModes.shift();
              }
              $scope.drawingManagerControl.getDrawingManager().setOptions(controlOptions);
          });
      })
  
  }).config(function (uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
            libraries: 'drawing,geometry,visualization'
        });
    });
  
  
  //var latlng = new google.maps.LatLng(37.09024, -95.712891);
  //latitude: 41.850033, longitude: -87.6500523
  </code></pre>
  
  <p>This only shows a google map that zooms and even nothing is being drawn. Please help. One thing i have noted is !$scope.drawingManagerControl.getDrawingManager turns true in if condition and returns back.</p>