## [Marker](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Marker) class class `google.maps.Marker` extends `MVCObject` library `"marker"` > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** As of February 21st, 2024, google.maps.Marker is deprecated. Please use `AdvancedMarkerElement` instead. At this time, google.maps.Marker is not scheduled to be discontinued, but `AdvancedMarkerElement` is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see for additional details and for the migration guide. ```javascript const {Marker} = await google.maps.importLibrary("marker"); ``` | ### Constructor || |---|---| | `Marker` | `Marker([opts])` **Parameters:** - `opts: MarkerOptions optional` Creates a marker with the options specified. If a map is specified, the marker is added to the map upon construction. Note that the position must be set for the marker to display. | | ### Constants || |---|---| | `MAX_ZINDEX` | The maximum default z-index that the API will assign to a marker. You may set a higher z-index to bring a marker to the front. | | ### Methods || |---|---| | `getAnimation` | `getAnimation()` **Parameters:** None **Return Value:** `Animation|null|undefined` Get the currently running animation. | | `getClickable` | `getClickable()` **Parameters:** None **Return Value:** `boolean` True if the Marker is clickable. Get the clickable status of the `Marker`. | | `getCursor` | `getCursor()` **Parameters:** None **Return Value:** `string|null|undefined` Get the mouse cursor type shown on hover. | | `getDraggable` | `getDraggable()` **Parameters:** None **Return Value:** `boolean` True if the Marker is draggable. Get the draggable status of the `Marker`. | | `getIcon` | `getIcon()` **Parameters:** None **Return Value:** `string|Icon|Symbol|null|undefined` Get the icon of the `Marker`. See `MarkerOptions.icon`. | | `getLabel` | `getLabel()` **Parameters:** None **Return Value:** `MarkerLabel|string|null|undefined` Get the label of the `Marker`. See `MarkerOptions.label`. | | `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|StreetViewPanorama|null` Get the map or panaroama the `Marker` is rendered on. | | `getOpacity` | `getOpacity()` **Parameters:** None **Return Value:** `number|null|undefined` A number between 0.0 and 1.0. Get the opacity of the `Marker`. | | `getPosition` | `getPosition()` **Parameters:** None **Return Value:** `LatLng|null|undefined` Get the position of the `Marker`. | | `getShape` | `getShape()` **Parameters:** None **Return Value:** `MarkerShape|null|undefined` Get the shape of the `Marker` used for interaction. See `MarkerOptions.shape` and `MarkerShape`. | | `getTitle` | `getTitle()` **Parameters:** None **Return Value:** `string|null|undefined` Get the title of the `Marker` tooltip. See `MarkerOptions.title`. | | `getVisible` | `getVisible()` **Parameters:** None **Return Value:** `boolean` True if the Marker is visible. Get the visibility of the `Marker`. | | `getZIndex` | `getZIndex()` **Parameters:** None **Return Value:** `number|null|undefined` zIndex of the Marker. Get the zIndex of the `Marker`. See `MarkerOptions.zIndex`. | | `setAnimation` | `setAnimation([animation])` **Parameters:** - `animation: Animation optional` The animation to play. **Return Value:** None Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: `Animation.BOUNCE`, `Animation.DROP`. Passing in `null` will cause any animation to stop. | | `setClickable` | `setClickable(flag)` **Parameters:** - `flag: boolean` If `true`, the Marker can be clicked. **Return Value:** None Set if the `Marker` is clickable. | | `setCursor` | `setCursor([cursor])` **Parameters:** - `cursor: string optional` Mouse cursor type. **Return Value:** None Set the mouse cursor type shown on hover. | | `setDraggable` | `setDraggable(flag)` **Parameters:** - `flag: boolean optional` If `true`, the Marker can be dragged. **Return Value:** None Set if the `Marker` is draggable. | | `setIcon` | `setIcon([icon])` **Parameters:** - `icon: string|Icon|Symbol optional` **Return Value:** None Set the icon for the `Marker`. See `MarkerOptions.icon`. | | `setLabel` | `setLabel([label])` **Parameters:** - `label: string|MarkerLabel optional` The label can either be a character string or a `MarkerLabel` object. **Return Value:** None Set the label for the `Marker`. See `MarkerOptions.label`. | | `setMap` | `setMap(map)` **Parameters:** - `map: Map|StreetViewPanorama optional` **Return Value:** None Renders the `Marker` on the specified map or panorama. If map is set to `null`, the marker will be removed. | | `setOpacity` | `setOpacity([opacity])` **Parameters:** - `opacity: number optional` A number between 0.0, transparent, and 1.0, opaque. **Return Value:** None Set the opacity of the `Marker`. | | `setOptions` | `setOptions(options)` **Parameters:** - `options: MarkerOptions optional` **Return Value:** None Set the options for the `Marker`. | | `setPosition` | `setPosition([latlng])` **Parameters:** - `latlng: LatLng|LatLngLiteral optional` The new position. **Return Value:** None Set the postition for the `Marker`. | | `setShape` | `setShape([shape])` **Parameters:** - `shape: MarkerShape optional` **Return Value:** None Set the shape of the `Marker` used for interaction. See `MarkerOptions.shape` and `MarkerShape`. | | `setTitle` | `setTitle([title])` **Parameters:** - `title: string optional` **Return Value:** None Set the title of the `Marker` tooltip. See `MarkerOptions.title`. | | `setVisible` | `setVisible(visible)` **Parameters:** - `visible: boolean` If `true`, the Marker is visible **Return Value:** None Set if the `Marker` is visible. | | `setZIndex` | `setZIndex([zIndex])` **Parameters:** - `zIndex: number optional` **Return Value:** None Set the zIndex of the `Marker`. See `MarkerOptions.zIndex`. | | ### Events || |---|---| | `animation_changed` | `function()` **Arguments:** None This event is fired when the `Marker` animation property changes. | | `click` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the `Marker` icon was clicked. | | `clickable_changed` | `function()` **Arguments:** None This event is fired when the `Marker` clickable property changes. | | `contextmenu` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the DOM contextmenu event is fired on the `Marker` | | `cursor_changed` | `function()` **Arguments:** None This event is fired when the `Marker` cursor property changes. | | `dblclick` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the `Marker` icon was double clicked. | | `drag` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is repeatedly fired while the user drags the `Marker`. | | `dragend` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user stops dragging the `Marker`. | | `draggable_changed` | `function()` **Arguments:** None This event is fired when the `Marker` draggable property changes. | | `dragstart` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user starts dragging the `Marker`. | | `flat_changed` | `function()` **Arguments:** None This event is fired when the `Marker` flat property changes. | | `icon_changed` | `function()` **Arguments:** None This event is fired when the `Marker` icon property changes. | | `mousedown` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired for a mousedown on the `Marker`. | | `mouseout` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the mouse leaves the area of the `Marker` icon. | | `mouseover` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the mouse enters the area of the `Marker` icon. | | `mouseup` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired for a mouseup on the `Marker`. | | `position_changed` | `function()` **Arguments:** None This event is fired when the `Marker` position property changes. | | `shape_changed` | `function()` **Arguments:** None This event is fired when the `Marker` shape property changes. | | `title_changed` | `function()` **Arguments:** None This event is fired when the `Marker` title property changes. | | `visible_changed` | `function()` **Arguments:** None This event is fired when the `Marker` visible property changes. | | `zindex_changed` | `function()` **Arguments:** None This event is fired when the `Marker` zIndex property changes. | | `[rightclick](https://developers.google.com/maps/documentation/javascript/reference/marker#Marker.rightclick)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the `Marker.contextmenu` event instead in order to support usage patterns like control-click on macOS. `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired for a rightclick on the `Marker`. | ## [MarkerOptions](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#MarkerOptions) interface interface `google.maps.MarkerOptions` > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. Please see for deprecation details and for the migration guide. MarkerOptions object used to define the properties that can be set on a Marker. | ### Properties || |---|---| | `anchorPoint` optional | **Type:** `Point optional` The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor. | | `animation` optional | **Type:** `Animation optional` **Default:** `null` Which animation to play when marker is added to a map. | | `clickable` optional | **Type:** `boolean optional` **Default:** `true` If `true`, the marker receives mouse and touch events. | | `[collisionBehavior](https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.collisionBehavior)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** `collisionBehavior` is deprecated as of July 2023. Use `AdvancedMarkerElement.collisionBehavior` instead. > [!WARNING] > **Notice:** Available only in the [v=beta channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-beta-channel). **Type:** `string|CollisionBehavior optional` **Default:** `null` Set a collision behavior for markers on vector maps. | | `crossOnDrag` optional | **Type:** `boolean optional` **Default:** `true` If `false`, disables cross that appears beneath the marker when dragging. | | `cursor` optional | **Type:** `string optional` **Default:** `pointer` Mouse cursor type to show on hover. | | `draggable` optional | **Type:** `boolean optional` **Default:** `false` If `true`, the marker can be dragged. **Note:** Setting this to `true` will make the marker clickable even if `clickable` is set to `false`. | | `icon` optional | **Type:** `string|Icon|Symbol optional` Icon for the foreground. If a string is provided, it is treated as though it were an `Icon` with the string as `url`. | | `label` optional | **Type:** `string|MarkerLabel optional` **Default:** `null` Adds a label to the marker. A marker label is a letter or number that appears inside a marker. The label can either be a string, or a `MarkerLabel` object. If provided and `MarkerOptions.title` is not provided, an accessibility text (e.g. for use with screen readers) will be added to the marker with the provided label's text. Please note that the `label` is currently only used for accessibility text for non-optimized markers. | | `map` optional | **Type:** `Map|StreetViewPanorama optional` Map on which to display Marker. The map is required to display the marker and can be provided with `Marker.setMap` if not provided at marker construction. | | `opacity` optional | **Type:** `number optional` **Default:** 1.0 A number between 0.0, transparent, and 1.0, opaque. | | `optimized` optional | **Type:** `boolean optional` Optimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required. Read more about [marker optimization](https://developers.google.com/maps/documentation/javascript/markers.md.txt#optimize). **Note:** This optimization has no effect for markers on vector maps. | | `position` optional | **Type:** `LatLng|LatLngLiteral optional` Sets the marker position. A marker may be constructed but not displayed until its position is provided - for example, by a user's actions or choices. A marker position can be provided with `Marker.setPosition` if not provided at marker construction. | | `shape` optional | **Type:** `MarkerShape optional` Image map region definition used for drag/click. | | `title` optional | **Type:** `string optional` **Default:** `undefined` Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the marker with the provided value. Please note that the `title` is currently only used for accessibility text for non-optimized markers. | | `visible` optional | **Type:** `boolean optional` **Default:** `true` If `true`, the marker is visible. | | `zIndex` optional | **Type:** `number optional` All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values. By default, markers are displayed according to their vertical position on screen, with lower markers appearing in front of markers further up the screen. | ## [CollisionBehavior](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#CollisionBehavior) constants constants `google.maps.CollisionBehavior` library `"marker"` These constants are also usable as strings. In TypeScript, the string literals are defined by the `CollisionBehaviorString` type. ```javascript const {CollisionBehavior} = await google.maps.importLibrary("marker"); ``` | ### Constants || |---|---| | `OPTIONAL_AND_HIDES_LOWER_PRIORITY` | Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown. | | `REQUIRED` | Always display the marker regardless of collision. This is the default behavior. | | `REQUIRED_AND_HIDES_OPTIONAL` | Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker. | ## [Icon](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Icon) interface interface `google.maps.Icon` A structure representing a Marker icon image. | ### Properties || |---|---| | `url` | **Type:** `string` The URL of the image or sprite sheet. | | `anchor` optional | **Type:** `Point optional` The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image. | | `labelOrigin` optional | **Type:** `Point optional` The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image. | | `origin` optional | **Type:** `Point optional` The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image `(0, 0)`. | | `scaledSize` optional | **Type:** `Size optional` The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite. | | `size` optional | **Type:** `Size optional` The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads. | ## [MarkerLabel](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#MarkerLabel) interface interface `google.maps.MarkerLabel` These options specify the appearance of a marker label. A marker label is a string (often a single character) which will appear inside the marker. If you are using it with a custom marker, you can reposition it with the `labelOrigin` property in the `Icon` class. | ### Properties || |---|---| | `text` | **Type:** `string` The text to be displayed in the label. | | `className` optional | **Type:** `string optional` **Default:** `''` (empty string) The className property of the label's element (equivalent to the element's class attribute). Multiple space-separated CSS classes can be added. The font color, size, weight, and family can only be set via the other properties of `MarkerLabel`. CSS classes should not be used to change the position nor orientation of the label (e.g. using translations and rotations) if also using [marker collision management](https://developers.google.com/maps/documentation/javascript/examples/marker-collision-management.md.txt). | | `color` optional | **Type:** `string optional` **Default:** `'black'` The color of the label text. | | `fontFamily` optional | **Type:** `string optional` The font family of the label text (equivalent to the CSS font-family property). | | `fontSize` optional | **Type:** `string optional` **Default:** `'14px'` The font size of the label text (equivalent to the CSS font-size property). | | `fontWeight` optional | **Type:** `string optional` The font weight of the label text (equivalent to the CSS font-weight property). | ## [MarkerShape](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#MarkerShape) interface interface `google.maps.MarkerShape` This object defines the clickable region of a marker image. The shape consists of two properties --- `type` and `coord` --- which define the non-transparent region of an image. | ### Properties || |---|---| | `type` | **Type:** `string` Describes the shape's type and can be `circle`, `poly` or `rect`. | | `coords` optional | **Type:** `Array optional` The format of this attribute depends on the value of the `type` and follows the w3 AREA `coords` specification found at . The `coords` attribute is an array of integers that specify the pixel position of the shape relative to the top-left corner of the target image. The coordinates depend on the value of `type` as follows: - `circle`: coords is `[x1,y1,r]` where x1,y2 are the coordinates of the center of the circle, and r is the radius of the circle. - `poly`: coords is `[x1,y1,x2,y2...xn,yn]` where each x,y pair contains the coordinates of one vertex of the polygon. - `rect`: coords is `[x1,y1,x2,y2]` where x1,y1 are the coordinates of the upper-left corner of the rectangle and x2,y2 are the coordinates of the lower-right coordinates of the rectangle. | ## [Symbol](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Symbol) interface interface `google.maps.Symbol` Describes a symbol, which consists of a vector path with styling. A symbol can be used as the icon of a marker, or placed on a polyline. | ### Properties || |---|---| | `path` | **Type:** `SymbolPath|string` The symbol's path, which is a built-in symbol path, or a custom path expressed using [SVG path notation](http://www.w3.org/TR/SVG/paths.html#PathData). Required. | | `anchor` optional | **Type:** `Point optional` **Default:** `google.maps.Point(0,0)` The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. The position is expressed in the same coordinate system as the symbol's path. | | `fillColor` optional | **Type:** `string optional` The symbol's fill color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on polylines, this defaults to the stroke color of the corresponding polyline. | | `fillOpacity` optional | **Type:** `number optional` **Default:** `0` The symbol's fill opacity. | | `labelOrigin` optional | **Type:** `Point optional` **Default:** `google.maps.Point(0,0)` The origin of the label relative to the origin of the path, if label is supplied by the marker. The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines. | | `rotation` optional | **Type:** `number optional` **Default:** `0` The angle by which to rotate the symbol, expressed clockwise in degrees. A symbol in an `IconSequence` where `fixedRotation` is `false` is rotated relative to the angle of the edge on which it lies. | | `scale` optional | **Type:** `number optional` The amount by which the symbol is scaled in size. For symbol markers, this defaults to 1; after scaling, the symbol may be of any size. For symbols on a polyline, this defaults to the stroke weight of the polyline; after scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor. | | `strokeColor` optional | **Type:** `string optional` The symbol's stroke color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on a polyline, this defaults to the stroke color of the polyline. | | `strokeOpacity` optional | **Type:** `number optional` The symbol's stroke opacity. For symbol markers, this defaults to 1. For symbols on a polyline, this defaults to the stroke opacity of the polyline. | | `strokeWeight` optional | **Type:** `number optional` **Default:** The `Symbol.scale` of the symbol. The symbol's stroke weight. | ## [SymbolPath](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#SymbolPath) constants constants `google.maps.SymbolPath` library `"core"` Built-in symbol paths. ```javascript const {SymbolPath} = await google.maps.importLibrary("core"); ``` | ### Constants || |---|---| | `BACKWARD_CLOSED_ARROW` | A backward-pointing closed arrow. | | `BACKWARD_OPEN_ARROW` | A backward-pointing open arrow. | | `CIRCLE` | A circle. | | `FORWARD_CLOSED_ARROW` | A forward-pointing closed arrow. | | `FORWARD_OPEN_ARROW` | A forward-pointing open arrow. | ## [Animation](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Animation) constants constants `google.maps.Animation` library `"marker"` Animations that can be played on a marker. Use the `Marker.setAnimation` method on Marker or the `MarkerOptions.animation` option to play an animation. ```javascript const {Animation} = await google.maps.importLibrary("marker"); ``` | ### Constants || |---|---| | `BOUNCE` | Marker bounces until animation is stopped by calling `Marker.setAnimation` with `null`. | | `DROP` | Marker drops from the top of the map to its final location. Animation will cease once the marker comes to rest and `Marker.getAnimation` will return `null`. This type of animation is usually specified during creation of the marker. |