<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/reference/3.63/advanced-markers_3f203e1d747641f017833840eb8c882e91f787b3eacd4b9ba9db8489f1724e95.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/3.63/advanced-markers.md.txt#AdvancedMarkerElement)
class


`google.maps.marker.AdvancedMarkerElement`
class

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

Custom element:  

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

This class extends
`HTMLElement`.

This class implements
`AdvancedMarkerElementOptions`.

Access by calling `const {AdvancedMarkerElement} = await google.maps.importLibrary("marker")`.   
See [Libraries in the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).

| ### 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` | **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:** - `<gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>` |
| `anchorTop` | **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:** - `<gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>` |
| `collisionBehavior` | **Type:** `CollisionBehavior optional` See `AdvancedMarkerElementOptions.collisionBehavior`. |
| `gmpClickable` | **Type:** `boolean optional` See `AdvancedMarkerElementOptions.gmpClickable`. **HTML attribute:** - `<gmp-advanced-marker gmp-clickable></gmp-advanced-marker>` |
| `gmpDraggable` | **Type:** `boolean optional` See `AdvancedMarkerElementOptions.gmpDraggable`. |
| `map` | **Type:** `Map optional` See `AdvancedMarkerElementOptions.map`. |
| `position` | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `AdvancedMarkerElementOptions.position`. **HTML attribute:** - `<gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>` - `<gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>` |
| `title` | **Type:** `string` See `AdvancedMarkerElementOptions.title`. **HTML attribute:** - `<gmp-advanced-marker title="string"></gmp-advanced-marker>` |
| `zIndex` | **Type:** `number optional` See `AdvancedMarkerElementOptions.zIndex`. |
| `[element](https://developers.google.com/maps/documentation/javascript/reference/3.63/advanced-markers#AdvancedMarkerElement.element)` | > [!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/3.63/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 ||
|---|---|
| `addEventListener` | `addEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A case-sensitive string representing the event type to listen for. - `listener`: `EventListener|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method - `options`: `boolean|AddEventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). Custom events only support `capture` and `passive`. **Return Value:** `void` Sets up a function that will be called whenever the specified event is delivered to the target. See [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) |
| `addListener` | `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. |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |

| ### Events ||
|---|---|
| `click` | `function(event)` **Arguments:** - `event`: `MapMouseEvent` This event is fired when the `AdvancedMarkerElement` element is clicked. Not available with `addEventListener()` (use `gmp-click` instead). |
| `drag` | `function(event)` **Arguments:** - `event`: `MapMouseEvent` This event is repeatedly fired while the user drags the `AdvancedMarkerElement`. Not available with `addEventListener()`. |
| `dragend` | `function(event)` **Arguments:** - `event`: `MapMouseEvent` This event is fired when the user stops dragging the `AdvancedMarkerElement`. Not available with `addEventListener()`. |
| `dragstart` | `function(event)` **Arguments:** - `event`: `MapMouseEvent` This event is fired when the user starts dragging the `AdvancedMarkerElement`. Not available with `addEventListener()`. |
| `gmp-click` | `function(event)` **Arguments:** - `event`: `AdvancedMarkerClickEvent` This event is fired when the `AdvancedMarkerElement` element is clicked. Best used with `addEventListener()` (instead of `addListener()`). |

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


`google.maps.marker.AdvancedMarkerElementOptions`
interface

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. 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/3.63/advanced-markers.md.txt#AdvancedMarkerClickEvent)
class


`google.maps.marker.AdvancedMarkerClickEvent`
class

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

This class extends
`Event`.

Access by calling `const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker")`.   
See [Libraries in the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).

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


`google.maps.marker.PinElement`
class

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`.  

This class extends
`HTMLElement`.

This class implements
`PinElementOptions`.

Access by calling `const {PinElement} = await google.maps.importLibrary("marker")`.   
See [Libraries in the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).

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

| ### Properties ||
|---|---|
| `background` | **Type:** `string optional` See `PinElementOptions.background`. |
| `borderColor` | **Type:** `string optional` See `PinElementOptions.borderColor`. |
| `glyphColor` | **Type:** `string optional` See `PinElementOptions.glyphColor`. |
| `glyphSrc` | **Type:** `URL|string optional` See `PinElementOptions.glyphSrc`. |
| `glyphText` | **Type:** `string optional` See `PinElementOptions.glyphText`. |
| `scale` | **Type:** `number optional` See `PinElementOptions.scale`. |
| `[element](https://developers.google.com/maps/documentation/javascript/reference/3.63/advanced-markers#PinElement.element)` | > [!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/3.63/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 ||
|---|---|
| `addEventListener` | `addEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A case-sensitive string representing the event type to listen for. - `listener`: `EventListener|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method - `options`: `boolean|AddEventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). Custom events only support `capture` and `passive`. **Return Value:** `void` Sets up a function that will be called whenever the specified event is delivered to the target. See [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |

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


`google.maps.marker.PinElementOptions`
interface

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/3.63/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. |