Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Drawing Library

DrawingManagerclass

google.maps.drawing.DrawingManagerclass

Allows users to draw markers, polygons, polylines, rectangles, and circles on the map. TheDrawingManager's drawing mode defines the type of overlay that will be created by the user. Adds a control to the map, allowing the user to switch drawing mode.

This class extendsMVCObject.

Access by callingconst {DrawingManager} = await google.maps.importLibrary("drawing").
SeeLibraries in the Maps JavaScript API.

Constructor

DrawingManager
DrawingManager([options])
Parameters: 
Creates aDrawingManager that allows users to draw overlays on the map, and switch between the type of overlay to be drawn with a drawing control.

Methods

getDrawingMode
getDrawingMode()
Parameters:  None
Return Value: OverlayType|null
Returns theDrawingManager's drawing mode.
getMap
getMap()
Parameters:  None
Return Value: Map
Returns theMap to which theDrawingManager is attached, which is theMap on which the overlays created will be placed.
setDrawingMode
setDrawingMode(drawingMode)
Parameters: 
Return Value:  None
Changes theDrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are'marker','polygon','polyline','rectangle','circle', ornull. A drawing mode ofnull means that the user can interact with the map as normal, and clicks do not draw anything.
setMap
setMap(map)
Parameters: 
Return Value:  None
Attaches theDrawingManager object to the specifiedMap.
setOptions
setOptions(options)
Parameters: 
Return Value:  None
Sets theDrawingManager's options.
Inherited:addListener,bindTo,get,notify,set,setValues,unbind,unbindAll

Events

circlecomplete
function(circle)
Arguments: 
  • circle: Circle The circle that the user has just drawn.
This event is fired when the user has finished drawing a circle.
markercomplete
function(marker)
Arguments: 
  • marker: Marker The marker that the user has just drawn.
This event is fired when the user has finished drawing a marker.
overlaycomplete
function(event)
Arguments: 
  • event: OverlayCompleteEvent The overlay that the user has just drawn, together with the type of the overlay.
This event is fired when the user has finished drawing an overlay of any type.
polygoncomplete
function(polygon)
Arguments: 
  • polygon: Polygon The polygon that the user has just drawn.
This event is fired when the user has finished drawing a polygon.
polylinecomplete
function(polyline)
Arguments: 
  • polyline: Polyline The polyline that the user has just drawn.
This event is fired when the user has finished drawing a polyline.
rectanglecomplete
function(rectangle)
Arguments: 
  • rectangle: Rectangle The rectangle that the user has just drawn.
This event is fired when the user has finished drawing a rectangle.

DrawingManagerOptionsinterface

google.maps.drawing.DrawingManagerOptionsinterface

Options for the drawing manager.

Properties

circleOptionsoptional
Type: CircleOptionsoptional
Options to apply to any new circles created with thisDrawingManager. Thecenter andradius properties are ignored, and themap property of a new circle is always set to theDrawingManager's map.
drawingControloptional
Type: booleanoptional
Default:true
The enabled/disabled state of the drawing control.
drawingControlOptionsoptional
Type: DrawingControlOptionsoptional
The display options for the drawing control.
drawingModeoptional
Type: OverlayTypeoptional
TheDrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are'marker','polygon','polyline','rectangle','circle', ornull. A drawing mode ofnull means that the user can interact with the map as normal, and clicks do not draw anything.
mapoptional
Type: Mapoptional
TheMap to which theDrawingManager is attached, which is theMap on which the overlays created will be placed.
markerOptionsoptional
Type: MarkerOptionsoptional
Options to apply to any new markers created with thisDrawingManager. Theposition property is ignored, and themap property of a new marker is always set to theDrawingManager's map.
polygonOptionsoptional
Type: PolygonOptionsoptional
Options to apply to any new polygons created with thisDrawingManager. Thepaths property is ignored, and themap property of a new polygon is always set to theDrawingManager's map.
polylineOptionsoptional
Type: PolylineOptionsoptional
Options to apply to any new polylines created with thisDrawingManager. Thepath property is ignored, and themap property of a new polyline is always set to theDrawingManager's map.
rectangleOptionsoptional
Type: RectangleOptionsoptional
Options to apply to any new rectangles created with thisDrawingManager. Thebounds property is ignored, and themap property of a new rectangle is always set to theDrawingManager's map.

DrawingControlOptionsinterface

google.maps.drawing.DrawingControlOptionsinterface

Options for the rendering of the drawing control.

Properties

drawingModesoptional
Type: Array<OverlayType>optional
The drawing modes to display in the drawing control, in the order in which they are to be displayed. The hand icon (which corresponds to thenull drawing mode) is always available and is not to be specified in this array.
positionoptional
Type: ControlPositionoptional
Position id. Used to specify the position of the control on the map.

OverlayCompleteEventinterface

google.maps.drawing.OverlayCompleteEventinterface

The properties of an overlaycomplete event on aDrawingManager.

Properties

overlay
The completed overlay.
type
The completed overlay's type.

OverlayTypeconstants

google.maps.drawing.OverlayTypeconstants

The types of overlay that may be created by theDrawingManager. Specify these by value, or by using the constant's name. For example,'polygon' orgoogle.maps.drawing.OverlayType.POLYGON.

Access by callingconst {OverlayType} = await google.maps.importLibrary("drawing").
SeeLibraries in the Maps JavaScript API.

Constants

CIRCLESpecifies that theDrawingManager creates circles, and that the overlay given in theoverlaycomplete event is a circle.
MARKERSpecifies that theDrawingManager creates markers, and that the overlay given in theoverlaycomplete event is a marker.
POLYGONSpecifies that theDrawingManager creates polygons, and that the overlay given in theoverlaycomplete event is a polygon.
POLYLINESpecifies that theDrawingManager creates polylines, and that the overlay given in theoverlaycomplete event is a polyline.
RECTANGLESpecifies that theDrawingManager creates rectangles, and that the overlay given in theoverlaycomplete event is a rectangle.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-10-10 UTC.