<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/reference/polygon_bee4788e7c647f656a9ec5e350ffab6521e7fa35736d4f262876bdbd6c1709f4.frame" class="framebox inherit-locale redirect-iframe" allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## [Polyline](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polyline)
class


class
`google.maps.Polyline`
extends `MVCObject`

library `"maps"`

A polyline is a linear overlay of connected line segments on the map.

```javascript
const {Polyline} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `Polyline` | `Polyline([opts])` **Parameters:** - `opts: PolylineOptions optional` Create a polyline using the passed `[PolylineOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions)`, which specify both the path of the polyline and the stroke style to use when drawing the polyline. You may pass either an array of `LatLng`s or an `MVCArray` of `LatLng`s when constructing a polyline, though simple arrays are converted to `MVCArray`s within the polyline upon instantiation. |

| ### Methods ||
|---|---|
| `getDraggable` | `getDraggable()` **Parameters:** None **Return Value:** `boolean` Returns whether this shape can be dragged by the user. |
| `getEditable` | `getEditable()` **Parameters:** None **Return Value:** `boolean` Returns whether this shape can be edited by the user. |
| `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|null` Returns the map on which this shape is attached. |
| `getPath` | `getPath()` **Parameters:** None **Return Value:** `MVCArray<LatLng>` Retrieves the path. |
| `getVisible` | `getVisible()` **Parameters:** None **Return Value:** `boolean` Returns whether this poly is visible on the map. |
| `setDraggable` | `setDraggable(draggable)` **Parameters:** - `draggable: boolean` **Return Value:** None If set to `true`, the user can drag this shape over the map. The `geodesic` property defines the mode of dragging. |
| `setEditable` | `setEditable(editable)` **Parameters:** - `editable: boolean` **Return Value:** None If set to `true`, the user can edit this shape by dragging the control points shown at the vertices and on each segment. |
| `setMap` | `setMap(map)` **Parameters:** - `map: Map optional` **Return Value:** None Renders this shape on the specified map. If map is set to `null`, the shape will be removed. |
| `setOptions` | `setOptions(options)` **Parameters:** - `options: PolylineOptions optional` **Return Value:** None |
| `setPath` | `setPath(path)` **Parameters:** - `path: MVCArray<LatLng>|Array<LatLng|LatLngLiteral>` **Return Value:** None Sets the path. See *`PolylineOptions`* for more details. |
| `setVisible` | `setVisible(visible)` **Parameters:** - `visible: boolean` **Return Value:** None Hides this poly if set to `false`. |

| ### Events ||
|---|---|
| `click` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM click event is fired on the Polyline. |
| `contextmenu` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM contextmenu event is fired on Poyline. |
| `dblclick` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM dblclick event is fired on the Polyline. |
| `drag` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is repeatedly fired while the user drags the polyline. |
| `dragend` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user stops dragging the polyline. |
| `dragstart` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user starts dragging the polyline. |
| `mousedown` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mousedown event is fired on the Polyline. |
| `mousemove` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mousemove event is fired on the Polyline. |
| `mouseout` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired on Polyline mouseout. |
| `mouseover` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired on Polyline mouseover. |
| `mouseup` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mouseup event is fired on the Polyline. |
| `[rightclick](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.rightclick)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the `Polyline.contextmenu` event instead in order to support usage patterns like control-click on macOS. `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the Polyline is right-clicked on. |

## [PolylineOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions)
interface


interface
`google.maps.PolylineOptions`

PolylineOptions object used to define the properties that can be set on a Polyline.

| ### Properties ||
|---|---|
| `clickable` optional | **Type:** `boolean optional` **Default:** `true` Indicates whether this `Polyline` handles mouse events. |
| `draggable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can drag this shape over the map. The `geodesic` property defines the mode of dragging. |
| `editable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can edit this shape by dragging the control points shown at the vertices and on each segment. |
| `geodesic` optional | **Type:** `boolean optional` **Default:** `false` When `true`, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When `false`, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. |
| `icons` optional | **Type:** `Array<IconSequence> optional` The icons to be rendered along the polyline. |
| `map` optional | **Type:** `Map optional` Map on which to display Polyline. |
| `path` optional | **Type:** `MVCArray<LatLng>|Array<LatLng|LatLngLiteral> optional` The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of `LatLng`s, or an `MVCArray` of `LatLng`s. Note that if you pass a simple array, it will be converted to an `MVCArray` Inserting or removing LatLngs in the `MVCArray` will automatically update the polyline on the map. |
| `strokeColor` optional | **Type:** `string optional` The stroke color. All CSS3 colors are supported except for extended named colors. |
| `strokeOpacity` optional | **Type:** `number optional` The stroke opacity between 0.0 and 1.0. |
| `strokeWeight` optional | **Type:** `number optional` The stroke width in pixels. |
| `visible` optional | **Type:** `boolean optional` **Default:** `true` Whether this polyline is visible on the map. |
| `zIndex` optional | **Type:** `number optional` The zIndex compared to other polys. |

## [IconSequence](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#IconSequence)
interface


interface
`google.maps.IconSequence`

Describes how icons are to be rendered on a line.   

If your polyline is geodesic, then the distances specified for both offset and repeat are calculated in meters by default. Setting either offset or repeat to a pixel value will cause the distances to be calculated in pixels on the screen.

| ### Properties ||
|---|---|
| `fixedRotation` optional | **Type:** `boolean optional` **Default:** `false` If `true`, each icon in the sequence has the same fixed rotation regardless of the angle of the edge on which it lies. If `false`, case each icon in the sequence is rotated to align with its edge. |
| `icon` optional | **Type:** `Symbol optional` The icon to render on the line. |
| `offset` optional | **Type:** `string optional` **Default:** `'100%'` The distance from the start of the line at which an icon is to be rendered. This distance may be expressed as a percentage of line's length (e.g. '50%') or in pixels (e.g. '50px'). |
| `repeat` optional | **Type:** `string optional` **Default:** `0` The distance between consecutive icons on the line. This distance may be expressed as a percentage of the line's length (e.g. '50%') or in pixels (e.g. '50px'). To disable repeating of the icon, specify '0'. |

## [Polygon](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polygon)
class


class
`google.maps.Polygon`
extends `MVCObject`

library `"maps"`

A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. See the samples in the developer's guide, starting with a [simple polygon](https://developers.google.com/maps/documentation/javascript/examples/polygon-simple.md.txt), a [polygon with a hole](https://developers.google.com/maps/documentation/javascript/examples/polygon-hole.md.txt), and more. Note that you can also use the [Data layer](https://developers.google.com/maps/documentation/javascript/reference/data.md.txt#Data.Polygon) to create a polygon. The Data layer offers a simpler way of creating holes because it handles the order of the inner and outer paths for you.

```javascript
const {Polygon} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `Polygon` | `Polygon([opts])` **Parameters:** - `opts: PolygonOptions optional` Create a polygon using the passed `[PolygonOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions)`, which specify the polygon's path, the stroke style for the polygon's edges, and the fill style for the polygon's interior regions. A polygon may contain one or more paths, where each path consists of an array of `LatLng`s. You may pass either an array of LatLngs or an `MVCArray` of `LatLng`s when constructing these paths. Arrays are converted to `MVCArray`s within the polygon upon instantiation. |

| ### Methods ||
|---|---|
| `getDraggable` | `getDraggable()` **Parameters:** None **Return Value:** `boolean` Returns whether this shape can be dragged by the user. |
| `getEditable` | `getEditable()` **Parameters:** None **Return Value:** `boolean` Returns whether this shape can be edited by the user. |
| `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|null` Returns the map on which this shape is attached. |
| `getPath` | `getPath()` **Parameters:** None **Return Value:** `MVCArray<LatLng>` Retrieves the first path. |
| `getPaths` | `getPaths()` **Parameters:** None **Return Value:** `MVCArray<MVCArray<LatLng>>` Retrieves the paths for this polygon. |
| `getVisible` | `getVisible()` **Parameters:** None **Return Value:** `boolean` Returns whether this poly is visible on the map. |
| `setDraggable` | `setDraggable(draggable)` **Parameters:** - `draggable: boolean` **Return Value:** None If set to `true`, the user can drag this shape over the map. The `geodesic` property defines the mode of dragging. |
| `setEditable` | `setEditable(editable)` **Parameters:** - `editable: boolean` **Return Value:** None If set to `true`, the user can edit this shape by dragging the control points shown at the vertices and on each segment. |
| `setMap` | `setMap(map)` **Parameters:** - `map: Map optional` **Return Value:** None Renders this shape on the specified map. If map is set to `null`, the shape will be removed. |
| `setOptions` | `setOptions(options)` **Parameters:** - `options: PolygonOptions optional` **Return Value:** None |
| `setPath` | `setPath(path)` **Parameters:** - `path: MVCArray<LatLng>|Array<LatLng|LatLngLiteral>` **Return Value:** None Sets the first path. See *`PolygonOptions`* for more details. |
| `setPaths` | `setPaths(paths)` **Parameters:** - `paths: MVCArray<MVCArray<LatLng>>|MVCArray<LatLng>|Array<Array<LatLng|LatLngLiteral>>|Array<LatLng|LatLngLiteral>` **Return Value:** None Sets the path for this polygon. |
| `setVisible` | `setVisible(visible)` **Parameters:** - `visible: boolean` **Return Value:** None Hides this poly if set to `false`. |

| ### Events ||
|---|---|
| `click` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM click event is fired on the Polygon. |
| `contextmenu` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM contextmenu event is fired on the Polygon. |
| `dblclick` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM dblclick event is fired on the Polygon. |
| `drag` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is repeatedly fired while the user drags the polygon. |
| `dragend` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user stops dragging the polygon. |
| `dragstart` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user starts dragging the polygon. |
| `mousedown` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mousedown event is fired on the Polygon. |
| `mousemove` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mousemove event is fired on the Polygon. |
| `mouseout` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired on Polygon mouseout. |
| `mouseover` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired on Polygon mouseover. |
| `mouseup` | `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the DOM mouseup event is fired on the Polygon. |
| `[rightclick](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polygon.rightclick)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the `Polygon.contextmenu` event instead in order to support usage patterns like control-click on macOS. `function(event)` **Arguments:** - `event: PolyMouseEvent optional` This event is fired when the Polygon is right-clicked on. |

## [PolygonOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolygonOptions)
interface


interface
`google.maps.PolygonOptions`

PolygonOptions object used to define the properties that can be set on a Polygon.

| ### Properties ||
|---|---|
| `clickable` optional | **Type:** `boolean optional` **Default:** `true` Indicates whether this `Polygon` handles mouse events. |
| `draggable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can drag this shape over the map. The `geodesic` property defines the mode of dragging. |
| `editable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can edit this shape by dragging the control points shown at the vertices and on each segment. |
| `fillColor` optional | **Type:** `string optional` The fill color. All CSS3 colors are supported except for extended named colors. |
| `fillOpacity` optional | **Type:** `number optional` The fill opacity between 0.0 and 1.0 |
| `geodesic` optional | **Type:** `boolean optional` **Default:** `false` When `true`, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When `false`, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. |
| `map` optional | **Type:** `Map optional` Map on which to display Polygon. |
| `paths` optional | **Type:** `MVCArray<MVCArray<LatLng>>|MVCArray<LatLng>|Array<Array<LatLng|LatLngLiteral>>|Array<LatLng|LatLngLiteral> optional` The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of `LatLng` coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of `LatLng`s. More complex polygons may specify an array of arrays. Any simple arrays are converted into `MVCArray`s. Inserting or removing `LatLng`s from the `MVCArray` will automatically update the polygon on the map. |
| `strokeColor` optional | **Type:** `string optional` The stroke color. All CSS3 colors are supported except for extended named colors. |
| `strokeOpacity` optional | **Type:** `number optional` The stroke opacity between 0.0 and 1.0 |
| `strokePosition` optional | **Type:** `StrokePosition optional` **Default:** `StrokePosition.CENTER` The stroke position. |
| `strokeWeight` optional | **Type:** `number optional` The stroke width in pixels. |
| `visible` optional | **Type:** `boolean optional` **Default:** `true` Whether this polygon is visible on the map. |
| `zIndex` optional | **Type:** `number optional` The zIndex compared to other polys. |

## [PolyMouseEvent](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolyMouseEvent)
interface


interface
`google.maps.PolyMouseEvent`
extends `MapMouseEvent`

This object is returned from mouse events on polylines and polygons.

| ### Properties ||
|---|---|
| `edge` optional | **Type:** `number optional` The index of the edge within the path beneath the cursor when the event occurred, if the event occurred on a mid-point on an editable polygon. |
| `path` optional | **Type:** `number optional` The index of the path beneath the cursor when the event occurred, if the event occurred on a vertex and the polygon is editable. Otherwise `undefined`. |
| `vertex` optional | **Type:** `number optional` The index of the vertex beneath the cursor when the event occurred, if the event occurred on a vertex and the polyline or polygon is editable. If the event does not occur on a vertex, the value is `undefined`. |

| ### Methods ||
|---|---|

## [Rectangle](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Rectangle)
class


class
`google.maps.Rectangle`
extends `MVCObject`

library `"maps"`

A rectangle overlay.

```javascript
const {Rectangle} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `Rectangle` | `Rectangle([opts])` **Parameters:** - `opts: RectangleOptions optional` Create a rectangle using the passed `[RectangleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions)`, which specify the bounds and style. |

| ### Methods ||
|---|---|
| `getBounds` | `getBounds()` **Parameters:** None **Return Value:** `LatLngBounds|null` Returns the bounds of this rectangle. |
| `getDraggable` | `getDraggable()` **Parameters:** None **Return Value:** `boolean` Returns whether this rectangle can be dragged by the user. |
| `getEditable` | `getEditable()` **Parameters:** None **Return Value:** `boolean` Returns whether this rectangle can be edited by the user. |
| `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|null` Returns the map on which this rectangle is displayed. |
| `getVisible` | `getVisible()` **Parameters:** None **Return Value:** `boolean` Returns whether this rectangle is visible on the map. |
| `setBounds` | `setBounds(bounds)` **Parameters:** - `bounds: LatLngBounds|LatLngBoundsLiteral optional` **Return Value:** None Sets the bounds of this rectangle. |
| `setDraggable` | `setDraggable(draggable)` **Parameters:** - `draggable: boolean` **Return Value:** None If set to `true`, the user can drag this rectangle over the map. |
| `setEditable` | `setEditable(editable)` **Parameters:** - `editable: boolean` **Return Value:** None If set to `true`, the user can edit this rectangle by dragging the control points shown at the corners and on each edge. |
| `setMap` | `setMap(map)` **Parameters:** - `map: Map optional` **Return Value:** None Renders the rectangle on the specified map. If map is set to `null`, the rectangle will be removed. |
| `setOptions` | `setOptions(options)` **Parameters:** - `options: RectangleOptions optional` **Return Value:** None |
| `setVisible` | `setVisible(visible)` **Parameters:** - `visible: boolean` **Return Value:** None Hides this rectangle if set to `false`. |

| ### Events ||
|---|---|
| `bounds_changed` | `function()` **Arguments:** None This event is fired when the rectangle's bounds are changed. |
| `click` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM click event is fired on the rectangle. |
| `contextmenu` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM contextmenu event is fired on the rectangle. |
| `dblclick` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM dblclick event is fired on the rectangle. |
| `drag` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is repeatedly fired while the user drags the rectangle. |
| `dragend` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user stops dragging the rectangle. |
| `dragstart` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user starts dragging the rectangle. |
| `mousedown` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mousedown event is fired on the rectangle. |
| `mousemove` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mousemove event is fired on the rectangle. |
| `mouseout` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired on rectangle mouseout. |
| `mouseover` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired on rectangle mouseover. |
| `mouseup` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mouseup event is fired on the rectangle. |
| `[rightclick](https://developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.rightclick)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the `Rectangle.contextmenu` event instead in order to support usage patterns like control-click on macOS. `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the rectangle is right-clicked on. |

## [RectangleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#RectangleOptions)
interface


interface
`google.maps.RectangleOptions`

RectangleOptions object used to define the properties that can be set on a Rectangle.

| ### Properties ||
|---|---|
| `bounds` optional | **Type:** `LatLngBounds|LatLngBoundsLiteral optional` The bounds. |
| `clickable` optional | **Type:** `boolean optional` **Default:** `true` Indicates whether this `Rectangle` handles mouse events. |
| `draggable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can drag this rectangle over the map. |
| `editable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can edit this rectangle by dragging the control points shown at the corners and on each edge. |
| `fillColor` optional | **Type:** `string optional` The fill color. All CSS3 colors are supported except for extended named colors. |
| `fillOpacity` optional | **Type:** `number optional` The fill opacity between 0.0 and 1.0 |
| `map` optional | **Type:** `Map optional` Map on which to display Rectangle. |
| `strokeColor` optional | **Type:** `string optional` The stroke color. All CSS3 colors are supported except for extended named colors. |
| `strokeOpacity` optional | **Type:** `number optional` The stroke opacity between 0.0 and 1.0 |
| `strokePosition` optional | **Type:** `StrokePosition optional` **Default:** `StrokePosition.CENTER` The stroke position. |
| `strokeWeight` optional | **Type:** `number optional` The stroke width in pixels. |
| `visible` optional | **Type:** `boolean optional` **Default:** `true` Whether this rectangle is visible on the map. |
| `zIndex` optional | **Type:** `number optional` The zIndex compared to other polys. |

## [Circle](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Circle)
class


class
`google.maps.Circle`
extends `MVCObject`

library `"maps"`

A circle on the Earth's surface; also known as a "spherical cap".

```javascript
const {Circle} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `Circle` | `Circle([circleOrCircleOptions])` **Parameters:** - `circleOrCircleOptions: Circle|CircleLiteral|CircleOptions optional` Create a circle using the passed `CircleOptions`, which specify the center, radius, and style. |

| ### Methods ||
|---|---|
| `getBounds` | `getBounds()` **Parameters:** None **Return Value:** `LatLngBounds|null` Gets the `LatLngBounds` of this Circle. |
| `getCenter` | `getCenter()` **Parameters:** None **Return Value:** `LatLng|null` Returns the center of this circle. |
| `getDraggable` | `getDraggable()` **Parameters:** None **Return Value:** `boolean` Returns whether this circle can be dragged by the user. |
| `getEditable` | `getEditable()` **Parameters:** None **Return Value:** `boolean` Returns whether this circle can be edited by the user. |
| `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|null` Returns the map on which this circle is displayed. |
| `getRadius` | `getRadius()` **Parameters:** None **Return Value:** `number` Returns the radius of this circle (in meters). |
| `getVisible` | `getVisible()` **Parameters:** None **Return Value:** `boolean` Returns whether this circle is visible on the map. |
| `setCenter` | `setCenter(center)` **Parameters:** - `center: LatLng|LatLngLiteral optional` **Return Value:** None Sets the center of this circle. |
| `setDraggable` | `setDraggable(draggable)` **Parameters:** - `draggable: boolean` **Return Value:** None If set to `true`, the user can drag this circle over the map. |
| `setEditable` | `setEditable(editable)` **Parameters:** - `editable: boolean` **Return Value:** None If set to `true`, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. |
| `setMap` | `setMap(map)` **Parameters:** - `map: Map optional` **Return Value:** None Renders the circle on the specified map. If map is set to `null`, the circle will be removed. |
| `setOptions` | `setOptions(options)` **Parameters:** - `options: CircleOptions optional` **Return Value:** None |
| `setRadius` | `setRadius(radius)` **Parameters:** - `radius: number` **Return Value:** None Sets the radius of this circle (in meters). |
| `setVisible` | `setVisible(visible)` **Parameters:** - `visible: boolean` **Return Value:** None Hides this circle if set to `false`. |

| ### Events ||
|---|---|
| `center_changed` | `function()` **Arguments:** None This event is fired when the circle's center is changed. |
| `click` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM click event is fired on the circle. |
| `dblclick` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM dblclick event is fired on the circle. |
| `drag` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is repeatedly fired while the user drags the circle. |
| `dragend` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user stops dragging the circle. |
| `dragstart` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user starts dragging the circle. |
| `mousedown` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mousedown event is fired on the circle. |
| `mousemove` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mousemove event is fired on the circle. |
| `mouseout` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired on circle mouseout. |
| `mouseover` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired on circle mouseover. |
| `mouseup` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM mouseup event is fired on the circle. |
| `radius_changed` | `function()` **Arguments:** None This event is fired when the circle's radius is changed. |
| `rightclick` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the circle is right-clicked on. |

## [CircleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#CircleOptions)
interface


interface
`google.maps.CircleOptions`

extended by `CircleLiteral`

CircleOptions object used to define the properties that can be set on a Circle.

| ### Properties ||
|---|---|
| `center` optional | **Type:** `LatLng|LatLngLiteral optional` The center of the Circle. |
| `clickable` optional | **Type:** `boolean optional` **Default:** `true` Indicates whether this `Circle` handles mouse events. |
| `draggable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can drag this circle over the map. |
| `editable` optional | **Type:** `boolean optional` **Default:** `false` If set to `true`, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. |
| `fillColor` optional | **Type:** `string optional` The fill color. All CSS3 colors are supported except for extended named colors. |
| `fillOpacity` optional | **Type:** `number optional` The fill opacity between 0.0 and 1.0. |
| `map` optional | **Type:** `Map optional` Map on which to display the Circle. |
| `radius` optional | **Type:** `number optional` The radius in meters on the Earth's surface. |
| `strokeColor` optional | **Type:** `string optional` The stroke color. All CSS3 colors are supported except for extended named colors. |
| `strokeOpacity` optional | **Type:** `number optional` The stroke opacity between 0.0 and 1.0. |
| `strokePosition` optional | **Type:** `StrokePosition optional` **Default:** `StrokePosition.CENTER` The stroke position. |
| `strokeWeight` optional | **Type:** `number optional` The stroke width in pixels. |
| `visible` optional | **Type:** `boolean optional` **Default:** `true` Whether this circle is visible on the map. |
| `zIndex` optional | **Type:** `number optional` The zIndex compared to other polys. |

## [StrokePosition](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#StrokePosition)
constants


constants
`google.maps.StrokePosition`

library `"maps"`

The possible positions of the stroke on a polygon.

```javascript
const {StrokePosition} = await google.maps.importLibrary("maps");
```

| ### Constants ||
|---|---|
| `CENTER` | The stroke is centered on the polygon's path, with half the stroke inside the polygon and half the stroke outside the polygon. |
| `INSIDE` | The stroke lies inside the polygon. |
| `OUTSIDE` | The stroke lies outside the polygon. |