angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Hooking Circle Events to Drawing Manager #1032

Open 422vishal opened 9 years ago

422vishal commented 9 years ago

Are there any methods like getBound() and stuff for circles in angular-map. If so how to implement that?

knapeto commented 9 years ago

Try this

$scope.$watch('map.drawingManagerControl.getDrawingManager', function (val) {
   if (!$scope.map.drawingManagerControl.getDrawingManager) {
      return;
   }

   google.maps.event.addListener($scope.map.drawingManagerControl.getDrawingManager(), 'circlecomplete', function (e) {
      console.log(e.getBounds());
   });

});
422vishal commented 9 years ago

Is there any dependency for using the above. It's leaving an error " Cannot read property 'getDrawingManager' of undefined "

My controller:-

demo = angular.module('myApplicationModule', ['uiGmapgoogle-maps']);

 demo.controller('ExampleController', function ($scope) {
     $scope.map = {
         center: {
             latitude: 44,
             longitude: -108
         },
         zoom: 4
     };
     $scope.options = {
         scrollwheel: true
     };
     $scope.circles = [
         {
             id: 1,
             center: {
                 latitude: 40.1451,
                 longitude: -99.6680
             },
             radius: 500000,
             stroke: {
                 color: '#08B21F',
                 weight: 2,
                 opacity: 1
             },
             fill: {
                 color: '#08B21F',
                 opacity: 0.5
             },
             events: {

                 center_changed: function () {
                     console.log("Done");
                     //             var a = $scope.circles.getBounds();
                 }
             },
             geodesic: true, // optional: defaults to false
             draggable: true, // optional: defaults to false
             clickable: true, // optional: defaults to true
             editable: true, // optional: defaults to false
             visible: true // optional: defaults to true
            }

        ];
     $scope.marker = {
         id: 0,
         coords: {
             latitude: 40.1451,
             longitude: -99.6680
         },
         options: {
             draggable: true
         },
         icon: {
             url: "temop/download.png"
         },
         events: {
             dragend: function () {
                 var lat = $scope.marker.getPosition().lat();
             }
         }

     }

     $scope.$watch('map.drawingManagerControl.getDrawingManager', function (val) {
         if (!$scope.map.drawingManagerControl.getDrawingManager) {
             return;
         }

         google.maps.event.addListener($scope.map.drawingManagerControl.getDrawingManager(), 'circlecomplete', function (e) {
             console.log(e);
         });

     });

console.log($scope.circles);
 });
knapeto commented 9 years ago
$scope.map = {
        center: {
            latitude: 44,
            longitude: -108
        },
        zoom: 4,

        polyOptions: {
            strokeWeight: 0,
            fillOpacity: 0.45,
            editable: true
        },

        //waypoints
        drawingManagerOptions: {

            drawingMode: null,
            drawingControl: false,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.CIRCLE,
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.POLYLINE,
                    google.maps.drawing.OverlayType.RECTANGLE
                ]
            },
            rectangleOptions: this.polyOptions,
            polygonOptions: this.polyOptions,
            circleOptions: this.polyOptions
        },
        markersAndCircleFlag: true,
        drawingManagerControl: {}
    };

HTML

<ui-gmap-drawing-manager options="map.drawingManagerOptions" control="map.drawingManagerControl"></ui-gmap-drawing-manager>

remember libraries=drawing

<script src='http://maps.googleapis.com/maps/api/js?v=3.17&sensor=false&libraries=places,weather,geometry,visualization,drawing&language=en-US'></script>
mavillar commented 8 years ago

How can I remove all shapes drawn in Drawing manager.

I need to include an option for user to be able to clear the map while drawing in map.

I do not find anything.