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

Question

Working with angular-google-maps for the first time. I am confused how to draw a polygon and grab all the zip codes in this region. And I have no idea how to do this. Below 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 wrote 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 

It only shows a google map that scales and doesn't even draw anything. Please help. One thing I noticed is! $ Scope.drawingManagerControl.getDrawingManager turns true if the condition returns.

Answer 1

I think you should step back and look for what you really want to achieve. If you want to know angular, google maps, or both, I think you're not on the right track. First of all, the library that you use is no longer supported by their creators. Even they recommend using alternatives:

The project is no longer supported.

For the two options that they show, I recommend the second option: angular-google-maps

This library should be used with Angular2. If you want to learn new technologies, you should strive for technologies on a raise. Angularjs, although a very good library, widely used, is the predecessor of Angular2, and it will be less popular as time passes.

Having said that; I noticed that you did not indicate any markers or locations on your map. Thus, the data will not be displayed on your map. That is why you only see a blank card.

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

I suggest you better try to understand the logic of the code you are trying to implement before you try it and make it work from the sky.