Get Started Contact sales

    Drawing Library

    DrawingManager class

    google.maps.drawing . DrawingManager class

    Allows users to draw markers, polygons, polylines, rectangles, and circles on the map. The DrawingManager '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 extends MVCObject .

    Access by calling const {DrawingManager} = await google.maps.importLibrary("drawing") .See Libraries in the Maps JavaScript API .

    DrawingManager
    DrawingManager([options])
    Parameters:
    Creates a DrawingManager that allows users to draw overlays on the map, and switch between the type of overlay to be drawn with a drawing control.
    getDrawingMode
    getDrawingMode()
    Parameters:  None
    Return Value: OverlayType |null
    Returns the DrawingManager 's drawing mode.
    getMap
    getMap()
    Parameters:  None
    Return Value: Map
    Returns the Map to which the DrawingManager is attached, which is the Map on which the overlays created will be placed.
    setDrawingMode
    setDrawingMode(drawingMode)
    Parameters:
    Return Value:  None
    Changes the DrawingManager 's drawing mode, which defines the type of overlay to be added on the map. Accepted values are 'marker' , 'polygon' , 'polyline' , 'rectangle' , 'circle' , or null . A drawing mode of null 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 the DrawingManager object to the specified Map .
    setOptions
    setOptions(options)
    Parameters:
    Return Value:  None
    Sets the DrawingManager 's options.
    Inherited: addListener , bindTo , get , notify , set , setValues , unbind , unbindAll
    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.

    DrawingManagerOptions interface

    google.maps.drawing . DrawingManagerOptions interface

    Options for the drawing manager.
    circleOptions optional
    Type: CircleOptions optional
    Options to apply to any new circles created with this DrawingManager . The center and radius properties are ignored, and the map property of a new circle is always set to the DrawingManager 's map.
    drawingControl optional
    Type: boolean optional
    Default: true
    The enabled/disabled state of the drawing control.
    drawingControlOptions optional
    Type: DrawingControlOptions optional
    The display options for the drawing control.
    drawingMode optional
    Type: OverlayType optional
    The DrawingManager 's drawing mode, which defines the type of overlay to be added on the map. Accepted values are 'marker' , 'polygon' , 'polyline' , 'rectangle' , 'circle' , or null . A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything.
    map optional
    Type: Map optional
    The Map to which the DrawingManager is attached, which is the Map on which the overlays created will be placed.
    markerOptions optional
    Type: MarkerOptions optional
    Options to apply to any new markers created with this DrawingManager . The position property is ignored, and the map property of a new marker is always set to the DrawingManager 's map.
    polygonOptions optional
    Type: PolygonOptions optional
    Options to apply to any new polygons created with this DrawingManager . The paths property is ignored, and the map property of a new polygon is always set to the DrawingManager 's map.
    polylineOptions optional
    Type: PolylineOptions optional
    Options to apply to any new polylines created with this DrawingManager . The path property is ignored, and the map property of a new polyline is always set to the DrawingManager 's map.
    rectangleOptions optional
    Type: RectangleOptions optional
    Options to apply to any new rectangles created with this DrawingManager . The bounds property is ignored, and the map property of a new rectangle is always set to the DrawingManager 's map.

    DrawingControlOptions interface

    google.maps.drawing . DrawingControlOptions interface

    Options for the rendering of the drawing control.
    drawingModes optional
    Type: Array < OverlayType > optional
    Default: [ OverlayType.MARKER , OverlayType.POLYLINE , OverlayType.RECTANGLE , OverlayType.CIRCLE , OverlayType.POLYGON ]
    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 the null drawing mode) is always available and is not to be specified in this array.
    position optional
    Type: ControlPosition optional
    Default: ControlPosition.TOP_LEFT
    Position id. Used to specify the position of the control on the map.

    OverlayCompleteEvent interface

    google.maps.drawing . OverlayCompleteEvent interface

    The properties of an overlaycomplete event on a DrawingManager .
    overlay
    The completed overlay.
    type
    Type: OverlayType
    The completed overlay's type.

    OverlayType constants

    google.maps.drawing . OverlayType constants

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

    Access by calling const {OverlayType} = await google.maps.importLibrary("drawing") .See Libraries in the Maps JavaScript API .
    CIRCLE Specifies that the DrawingManager creates circles, and that the overlay given in the overlaycomplete event is a circle.
    MARKER Specifies that the DrawingManager creates markers, and that the overlay given in the overlaycomplete event is a marker.
    POLYGON Specifies that the DrawingManager creates polygons, and that the overlay given in the overlaycomplete event is a polygon.
    POLYLINE Specifies that the DrawingManager creates polylines, and that the overlay given in the overlaycomplete event is a polyline.
    RECTANGLE Specifies that the DrawingManager creates rectangles, and that the overlay given in the overlaycomplete event is a rectangle.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: