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

## [AdvancedMarkerElement](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElement)
class


class
`google.maps.marker.AdvancedMarkerElement`
extends `HTMLElement`
implements `AdvancedMarkerElementOptions`

library `"marker"`

Shows a position on a map. Note that the `position` must be set for the `AdvancedMarkerElement` to display.

```html
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
```

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

| ### Constructor ||
|---|---|
| `AdvancedMarkerElement` | `AdvancedMarkerElement([options])` **Parameters:** - `options: AdvancedMarkerElementOptions optional` Creates an `AdvancedMarkerElement` with the options specified. If a map is specified, the `AdvancedMarkerElement` is added to the map upon construction. |

| ### Properties ||
|---|---|
| `anchorLeft` attr: anchor-left | **Type:** `string optional` **Default:** "-50%" A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage) value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker. **HTML attribute:** `anchor-left="string"` |
| `anchorTop` attr: anchor-top | **Type:** `string optional` **Default:** "-100%" A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage) value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker. **HTML attribute:** `anchor-top="string"` |
| `collisionBehavior` | **Type:** `CollisionBehavior optional` See `AdvancedMarkerElementOptions.collisionBehavior`. |
| `gmpClickable` attr: gmp-clickable | **Type:** `boolean optional` See `AdvancedMarkerElementOptions.gmpClickable`. **HTML attribute:** `gmp-clickable` |
| `gmpDraggable` | **Type:** `boolean optional` See `AdvancedMarkerElementOptions.gmpDraggable`. |
| `map` | **Type:** `Map optional` See `AdvancedMarkerElementOptions.map`. |
| `position` attr: position | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `AdvancedMarkerElementOptions.position`. **HTML attribute:** - `position="lat,lng"` - `position="lat,lng,altitude"` |
| `title` attr: title | **Type:** `string` See `AdvancedMarkerElementOptions.title`. **HTML attribute:** `title="string"` |
| `zIndex` | **Type:** `number optional` See `AdvancedMarkerElementOptions.zIndex`. |
| `[element](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.element)` readonly | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the AdvancedMarkerElement directly. **Type:** `HTMLElement` This field is read-only. The DOM Element backing the view. |
| `[content](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.content)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use [.children](https://developer.mozilla.org/docs/Web/API/Element/children) instead. **Type:** `Node optional` See `AdvancedMarkerElementOptions.content`. |

| ### Methods ||
|---|---|
| `[addListener](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.addListener)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the standard DOM `addEventListener()` method instead. `addListener(eventName, handler)` **Parameters:** - `eventName: string` Observed event. - `handler: Function` Function to handle events. **Return Value:** `MapsEventListener` Resulting event listener. Adds the given listener function to the given event name in the Maps Eventing system. |

| ### Events ||
|---|---|
| `gmp-click` | `function(event)` **Arguments:** - `event: AdvancedMarkerClickEvent` This event is fired when the `AdvancedMarkerElement` element is clicked. Only supported with `addEventListener()` (instead of `addListener()`). |
| `gmp-drag` | `function(event)` **Arguments:** - `event: Event` This event is repeatedly fired while the user drags the `AdvancedMarkerElement`. Only supported with `addEventListener()` (instead of `addListener()`). |
| `gmp-dragend` | `function(event)` **Arguments:** - `event: Event` This event is fired when the user stops dragging the `AdvancedMarkerElement`. Only supported with `addEventListener()` (instead of `addListener()`). |
| `gmp-dragstart` | `function(event)` **Arguments:** - `event: Event` This event is fired when the user starts dragging the `AdvancedMarkerElement`. Only supported with `addEventListener()` (instead of `addListener()`). |
| `[click](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.click)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `AdvancedMarkerElement.gmp-click` instead. `function(event)` **Arguments:** - `event: MapMouseEvent` This event is fired when the `AdvancedMarkerElement` element is clicked. Not available with `addEventListener()` (use `gmp-click` instead). |
| `[dragstart](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.dragstart)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `AdvancedMarkerElement.gmp-dragstart` instead. `function(event)` **Arguments:** - `event: MapMouseEvent` This event is fired when the user starts dragging the `AdvancedMarkerElement`. Not available with `addEventListener()` (use `gmp-dragstart` instead). |
| `[drag](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.drag)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `AdvancedMarkerElement.gmp-drag` instead. `function(event)` **Arguments:** - `event: MapMouseEvent` This event is repeatedly fired while the user drags the `AdvancedMarkerElement`. Not available with `addEventListener()` (use `gmp-drag` instead). |
| `[dragend](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.dragend)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `AdvancedMarkerElement.gmp-dragend` instead. `function(event)` **Arguments:** - `event: MapMouseEvent` This event is fired when the user stops dragging the `AdvancedMarkerElement`. Not available with `addEventListener()` (use `gmp-dragend` instead). |

## [AdvancedMarkerElementOptions](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElementOptions)
interface


interface
`google.maps.marker.AdvancedMarkerElementOptions`

implemented by `AdvancedMarkerElement`

Options for constructing an `AdvancedMarkerElement`.

| ### Properties ||
|---|---|
| `anchorLeft` optional | **Type:** `string optional` **Default:** "-50%" A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage) value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker. |
| `anchorTop` optional | **Type:** `string optional` **Default:** "-100%" A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage) value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker. |
| `collisionBehavior` optional | **Type:** `CollisionBehavior optional` An enumeration specifying how an `AdvancedMarkerElement` should behave when it collides with another `AdvancedMarkerElement` or with the basemap labels on a vector map. **Note** : `AdvancedMarkerElement` to `AdvancedMarkerElement` collision works on both raster and vector maps, however, `AdvancedMarkerElement` to base map's label collision only works on vector maps. |
| `content` optional | **Type:** `Node optional` **Default:** `PinElement` The DOM Element backing the visual of an `AdvancedMarkerElement`. **Note** : `AdvancedMarkerElement` does not clone the passed-in DOM element. Once the DOM element is passed to an `AdvancedMarkerElement`, passing the same DOM element to another `AdvancedMarkerElement` will move the DOM element and cause the previous `AdvancedMarkerElement` to look empty. |
| `gmpClickable` optional | **Type:** `boolean optional` **Default:** `false` If `true`, the `AdvancedMarkerElement` will be clickable and trigger the `gmp-click` event, and will be interactive for accessibility purposes (e.g. allowing keyboard navigation via arrow keys). |
| `gmpDraggable` optional | **Type:** `boolean optional` **Default:** `false` If `true`, the `AdvancedMarkerElement` can be dragged. **Note** : `AdvancedMarkerElement` with altitude is not draggable. |
| `map` optional | **Type:** `Map optional` Map on which to display the `AdvancedMarkerElement`. The map is required to display the `AdvancedMarkerElement` and can be provided by setting `AdvancedMarkerElement.map` if not provided at the construction. |
| `position` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` Sets the `AdvancedMarkerElement`'s position. An `AdvancedMarkerElement` may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An `AdvancedMarkerElement`'s position can be provided by setting `AdvancedMarkerElement.position` if not provided at the construction. **Note** : `AdvancedMarkerElement` with altitude is only supported on vector maps. |
| `title` optional | **Type:** `string optional` Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the `AdvancedMarkerElement` with the provided value. |
| `zIndex` optional | **Type:** `number optional` All `AdvancedMarkerElement`s are displayed on the map in order of their zIndex, with higher values displaying in front of `AdvancedMarkerElement`s with lower values. By default, `AdvancedMarkerElement`s are displayed according to their vertical position on screen, with lower `AdvancedMarkerElement`s appearing in front of `AdvancedMarkerElement`s farther up the screen. Mixing markers with an explicit `zIndex` and markers without one can lead to unexpected visual results. To ensure predictable behavior, it is recommended to either set the `zIndex` for all markers or leave it unset. Note that `zIndex` is also used to help determine relative priority between `CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY` Advanced Markers. A higher `zIndex` value indicates higher priority. |

## [AdvancedMarkerClickEvent](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerClickEvent)
class


class
`google.maps.marker.AdvancedMarkerClickEvent`
extends `Event`

library `"marker"`

This event is created from clicking an Advanced Marker. Access the marker's position with `event.target.position`.

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

## [PinElement](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#PinElement)
class


class
`google.maps.marker.PinElement`
extends `HTMLElement`
implements `PinElementOptions`

library `"marker"`

A `PinElement` represents a DOM element that consists of a shape and a glyph. The shape has the same balloon style as seen in the default `AdvancedMarkerElement` or `Marker3DElement`. The glyph is an optional DOM element displayed in the balloon shape. A `PinElement` may have a different aspect ratio depending on its `PinElement.scale`.  

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

| ### Constructor ||
|---|---|
| `PinElement` | `PinElement([options])` **Parameters:** - `options: PinElementOptions optional` |

| ### Properties ||
|---|---|
| `background` | **Type:** `string optional` The background color of the pin shape. See `PinElementOptions.background`. |
| `borderColor` | **Type:** `string optional` The border color of the pin shape. See `PinElementOptions.borderColor`. |
| `glyphColor` | **Type:** `string optional` The color of the pin glyph. See `PinElementOptions.glyphColor`. |
| `glyphSrc` | **Type:** `URL|string optional` The source of the glyph image to be displayed in the pin. See `PinElementOptions.glyphSrc`. |
| `glyphText` | **Type:** `string optional` The text displayed in the pin. See `PinElementOptions.glyphText`. |
| `scale` | **Type:** `number optional` See `PinElementOptions.scale`. |
| `[element](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement.element)` readonly | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the PinElement directly. **Type:** `HTMLElement` This field is read-only. The DOM Element backing the view. |
| `[glyph](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement.glyph)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `PinElementOptions.glyphText` or `PinElementOptions.glyphSrc` instead. **Type:** `string|Element|URL optional` See `PinElementOptions.glyph`. |

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

## [PinElementOptions](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#PinElementOptions)
interface


interface
`google.maps.marker.PinElementOptions`

implemented by `PinElement`

Options for creating a `PinElement`.

| ### Properties ||
|---|---|
| `background` optional | **Type:** `string optional` The background color of the pin shape. Supports any CSS [color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
| `borderColor` optional | **Type:** `string optional` The border color of the pin shape. Supports any CSS [color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
| `[glyph](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions.glyph)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `PinElementOptions.glyphText` or `PinElementOptions.glyphSrc` instead. **Type:** `string|Element|URL optional` The DOM element displayed in the pin. |
| `glyphColor` optional | **Type:** `string optional` The color of the glyph. Supports any CSS [color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
| `glyphSrc` optional | **Type:** `URL|string optional` The source of the glyph image to be displayed in the pin. |
| `glyphText` optional | **Type:** `string optional` The text displayed in the pin. |
| `scale` optional | **Type:** `number optional` **Default:** `1` The scale of the pin. |