Advanced Markers

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

Properties

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

Type: HTMLElement

This field is read-only. The DOM Element backing the view.

content

Type: Node optional

See AdvancedMarkerElementOptions.content .

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 interface

google.maps.marker . AdvancedMarkerElementOptions interface

Options for constructing an AdvancedMarkerElement .

Properties
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.element 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 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 .

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

Note:Usage as a Web Component (e.g. usage as an HTMLElement subclass, or via HTML) is not yet supported.

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 .

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

• type :  string
• listener :  EventListener | EventListenerObject
• options :  boolean| AddEventListenerOptions optional

Return Value: void

This function is not yet available for usage.

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 .

Return Value: void

Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

PinElementOptions interface

google.maps.marker . PinElementOptions interface

Options for creating a PinElement .