For angular google maps I want it possible for only a polyline to be drawn from the drawingModes and not a RECTANGLE for example.
I've got the actual polyline working and recording when the drawing is complete.
I just want to hide the other options.
I'm using angular version 1 with javascript, using an angular directive and template.
In short I need to disable the other drawing options.
This is my html:
<ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">
<ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonConfig.events">
</ui-gmap-polygon>
<ui-gmap-markers models="compatiblePoints" coords="'self'" idKey="'id'"
options="pointsConfig.options"
clickable="true">
</ui-gmap-markers>
<ui-gmap-drawing-manager options="drawingManagerOptions" static="true" control="drawingManagerControl" events="config.drawing.events"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
This is my directive link js code:
angular.module("app.directives")
.directive("map", ["$rootScope", "$timeout", "$window", "uiGmapGoogleMapApi", "uiGmapIsReady", function ($rootScope, $timeout, $window, uiGmapGoogleMapApi, uiGmapIsReady) {
return {
restrict: "E",
templateUrl: "templates/map.html",
link: function (scope, elem) {
//Hides drawing options
scope.drawingManagerOptions = {
drawingMode: google.maps.drawing.OverlayType.POLYGON,
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
]
},
polylineOptions: {
editable: true
}
};
//TODO - draw polygon with coordinates
scope.drawPolygon = function(polygonBounds){
console.log("drawPolygon");
console.log(polygonBounds);
};
//Fires once polygon drawing is complete.
scope.polylinecomplete = function(dm, name, scope, objs){
var polygon = objs[0];
var coordinates = [];
var polygons = [];
polygons.push(polygon);
var polygonBounds = polygon.getPath();
for (var i = 0; i < polygonBounds.length; i++)
{
coordinates.push({lat: polygonBounds.getAt(i).lat(), lng: polygonBounds.getAt(i).lng()});
//coordinates.push(new google.maps.LatLng(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()));
}
console.log(coordinates);
scope.drawPolygon(polygonBounds);
};
//Settings for map and drawings
scope.config = {
"map": {
"zoom": 12,
"pan": true,
"center": {
"latitude": 51.5200,
"longitude": -0.220
},
"options": {
"scrollwheel": false,
"streetViewControl": false,
"tilt": 45,
"zoomControl": true
},
"events": {
},
"polygons": []
},
"drawing": {
"events": {
//"circlecomplete": scope.polylinecomplete,
//"markercomplete": scope.polylinecomplete,
//"overlaycomplete": scope.polylinecomplete,
"polygoncomplete": scope.polylinecomplete,
"polylinecomplete": scope.polylinecomplete,
//"rectanglecomplete": scope.polylinecomplete
}
}
};
}
};
}]);