Google Maps Drawing Manager Clear
angular.module("app", ["uiGmapgoogle-maps"]) .config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ libraries: 'drawing,geometry,visualization' }); }) .controller("mainCtrl", function($scope, $window, uiGmapIsReady) { //prevent error google undefined var google = { maps: { ControlPosition: {}, drawing: { OverlayType: {} }, } }; var selectedShape; var polygon; var drawingManager; var allShapes = []; //make no selection function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } //set selection to a shape function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); } //delete selected shape function deleteSelectedShape() { if (!selectedShape) { alert("There are no shape selected"); return; } var index = allShapes.indexOf(selectedShape); allShapes.splice(index, 1); selectedShape.setMap(null); console.log("allshapes after removing one", allShapes); } //get path coords function getShapeCoords(shape) { var path = shape.getPath(); var coords = []; for (var i = 0; i < path.length; i++) { coords.push({ latitude: path.getAt(i).lat(), longitude: path.getAt(i).lng() }); } return coords; } //When map is ready uiGmapIsReady.promise(1).then(function(instances) { var map; //assign google to window.google google = window.google; instances.forEach(function(inst) { map = inst.map; var uuid = map.uiGmap_id; var mapInstanceNumber = inst.instance; // Starts at 1. //Map click event listener => remove all selection in shape google.maps.event.addListener(map, 'click', clearSelection); }); if (!$scope.drawingManagerControl.getDrawingManager) { return; } drawingManager = $scope.drawingManagerControl.getDrawingManager(); //Event when a shape is drawed google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { // Switch to non-drawing mode after drawing a shape. drawingManager.setDrawingMode(null); // Add an event listener on this new shape, and make clickable //Click = selected var newShape = e.overlay; console.log('shape coords added', getShapeCoords(newShape)); newShape.setOptions({ clickable: true }); newShape.type = e.type; google.maps.event.addListener(newShape, 'click', function() { setSelection(newShape); google.maps.event.addListener(newShape.getPath(), 'insert_at', function() { alert('updated shape, go update it in your db'); console.log("allshapes index updated =", allShapes.indexOf(newShape)); }); google.maps.event.addListener(newShape.getPath(), 'set_at', function() { console.log('shape coords updated', getShapeCoords(newShape)); alert('updated shape, go update it in your db'); }); }); allShapes.push(newShape); console.log("all shapes array", allShapes); console.log("first coords", getShapeCoords(allShapes[0])); //after drawing = set selected setSelection(newShape); }); google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); }); $scope.map = { center: { latitude: 19.997454, longitude: 73.789803 }, zoom: 10, //mapTypeId: google.maps.MapTypeId.ROADMAP, //radius: 15000, stroke: { color: '#08B21F', weight: 2, opacity: 1 }, fill: { color: '#08B21F', opacity: 0.5 }, geodesic: true, // optional: defaults to false draggable: false, // optional: defaults to false clickable: false, // optional: defaults to true editable: false, // optional: defaults to false visible: true, // optional: defaults to true control: {}, refresh: "refreshMap", options: { scrollwheel: true }, Polygon: { visible: true, editable: true, draggable: true, geodesic: true, stroke: { weight: 3, color: 'red' } }, source: { id: 'source', coords: { 'latitude': 19.9989551, 'longitude': 73.75095599999997 }, options: { draggable: false, //icon: 'assets/img/person.png' } }, isDrawingModeEnabled: true }; $scope.drawingManagerControl = {}; $scope.drawingManagerOptions = { drawingControl: true, drawingControlOptions: { //position: 'TOP_LEFT', drawingModes: [ 'polygon' ] }, polygonOptions: { fillColor: '#BCDCF9', strokeColor: '#57ACF9', fillOpacity: 0.5, strokeWeight: 2, clickable: false, editable: true, zIndex: 1 } }; $scope.removeShape = function() { deleteSelectedShape(); }; }); <!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>angular-google-maps</title> <link rel="stylesheet" href="style.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script> <script src="//rawgit.com/angular-ui/angular-google-maps/2.1.X/dist/angular-google-maps.js"></script> <script src="script.js"></script> </head> <body ng-controller="mainCtrl as ctrl"> <h1>angular-google-maps</h1> <button ng-click="removeShape()">Remove selected shape</button> <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control"> <ui-gmap-marker coords="map.source.coords" options="map.source.options" idkey="map.source.id"> </ui-gmap-marker> <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager> </ui-gmap-google-map> </body> </html> .angular-google-map-container { height: 600px; } # angular-google-maps Debugging. Google Maps Drawing Manager Clear
Source: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/