How to draw a polygon using angular-google-maps in mvc5

Question

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

<div ng-app="myapp" ng-controller="mapsController">
    <!--It displays the markers links-->
    <div class="locations">
        <ul>
            <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
        </ul>
    </div>
    <div class="maps">
        <!-- Add directive code (gmap directive) for show map and markers-->
        <ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
            <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                <ui-gmap-window options="windowOptions" show="windowOptions.show">
                    <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager>
                </ui-gmap-window>
            </ui-gmap-marker>
        </ui-gmap-google-map>
    </div>
</div>

In my script.js i have written the following 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

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.

Answer 1

I think that you should step back and look for what you really want to achieve. If you want to learn angular, google maps, or both, I think you're not in the right path. First of all, the library you are using is no longer maintained by their creators. Even they recommend to use alternate options available:

Project not longer maintained

For the two options they show I will recommend the 2nd one: angular-google-maps

This library is to be used with Angular2. If you are looking to learn new technologies you should aim to tech on the raise. Angularjs, though is a really good library widely used, is the predecessor of Angular2 and it will be less popular as times goes by.

Having said that; I noticed that you didn't declared any markers or locations in your map. So, no data is set to show in your map. That's why you only see an empty map.

$scope.markers = [];
$scope.locations = [];

I suggest you better try to understand the logic of the code you're trying to implement prior to try it and make it work out of the sky.