Class Marker<TUserData>

The Marker class.

Type Parameters

  • TUserData = unknown

    Can be used to specify a type for the data specified in Marker.setData and available in dynamic attribute callbacks.

Hierarchy (View Summary)

Constructors

constructor

Properties

attributeDefaults_ backgroundColor? borderColor? classList? collisionBehavior? color? content? draggable? glyph? glyphColor? icon? position? scale? title? zIndex?

Accessors

map

Methods

addListener getDynamicAttributeState setAttributes setData update registerIconProvider

Constructors

constructor

Properties

ProtectedattributeDefaults_

attributeDefaults_: Partial<Attributes<TUserData>> = {}

Attributes set by inheriting classes. These are applied at a lower precedence than the values in attributes_ and allow inheriting classes to provide values that can be overridden by the user and restored to their original value.

OptionalbackgroundColor

backgroundColor?: AttributeValue<TUserData, string>

The background-color for the marker pin. Can be specified in any format supported by CSS.

OptionalborderColor

borderColor?: AttributeValue<TUserData, string>

The border-color for the marker pin. Can be specified in any format supported by CSS.

OptionalclassList

classList?: AttributeValue<TUserData, string | string[]>

A single classname or list of class names to be added to the content element.

OptionalcollisionBehavior

collisionBehavior?: AttributeValue<TUserData, CollisionBehavior>

The collision behavior controls how the marker interacts with other markers and labels on the map. See CollisionBehavior for more information.

Optionalcolor

color?: AttributeValue<TUserData, string>

The color of the marker. Can be specified in any format supported by CSS.

This is a shorthand property to set a default value for the three color-values (backgroundColor, borderColor and glyphColor) to matching colors.

The backgroundColor will be set to the specified color, the border-color will be a darkened vertsion of the color and the glyph-color is set based on the brightness of the specified color to either a darkened or lightened version.

Optionalcontent

content?: AttributeValue<TUserData, HTMLElement>

The content to replace the default pin. The specified html-element will be rendered instead of the default pin.

The content element you provide here will have access to the style-properties of the marker (colors and scale) via css custom properties (e.g. color: var(--marker-glyph-color, white)).

Optionaldraggable

draggable?: AttributeValue<TUserData, boolean>

Flag to enable draggable markers. When using draggable markers, the position-attribute of the marker will not be automatically updated. You have to listen to the dragstart, drag and dragend events and update the position accordingly.

Optionalglyph

glyph?: AttributeValue<TUserData, string | Element | URL>

The glyph to be shown inside the marker-pin. This can be a single letter or number, a dom-element or a URL-object pointing to an image file.

OptionalglyphColor

glyphColor?: AttributeValue<TUserData, string>

The color of the glyph within the marker pin. Can be specified in any format supported by CSS.

Optionalicon

icon?: AttributeValue<TUserData, string>

The id of an icon to be fetched via the icons.IconProvider. The resulting icon will be shown

Optionalposition

position?: AttributeValue<TUserData, Position>

The position of the marker on the map.

Optionalscale

scale?: AttributeValue<TUserData, number>

The scale of the marker as a multiple of the original scale.

Optionaltitle

title?: AttributeValue<TUserData, string>

The title of the marker element. Will be shown in the browsers default tooltip and should be provided for accessibility reasons.

OptionalzIndex

zIndex?: AttributeValue<TUserData, number>

Defines the z-ordering for the marker and is used to compute the priority for collision handling. See the official documentation for more information.

Accessors

map

  • get map(): null | Map

    Stores the map-instance. The map will be passed on to the AdvancedMarkerElement in performUpdate().

    Returns null | Map

  • set map(map: null | Map): void

    Parameters

    • map: null | Map

    Returns void

Methods

addListener

  • addListener<K extends keyof GoogleMapsAMVEventMap>(
        eventName: K,
        handler: (ev: GoogleMapsAMVEventMap[K]) => void,
    ): MapsEventListener

    Adds an event-listener to this marker. The internal events (click and dragging events) are attached to the marker instance using the Google Maps event system, while any dom-events will be added to the marker-element itself.

    Type Parameters

    • K extends keyof GoogleMapsAMVEventMap

    Parameters

    • eventName: K

      'click', 'dragstart', 'dragend', 'drag' or any DOM event-name.

    • handler: (ev: GoogleMapsAMVEventMap[K]) => void

    Returns MapsEventListener

  • addListener<K extends keyof HTMLElementEventMap>(
        eventName: K,
        handler: (ev: HTMLElementEventMap[K]) => void,
    ): MapsEventListener

    Adds an event-listener to this marker. The internal events (click and dragging events) are attached to the marker instance using the Google Maps event system, while any dom-events will be added to the marker-element itself.

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • eventName: K

      'click', 'dragstart', 'dragend', 'drag' or any DOM event-name.

    • handler: (ev: HTMLElementEventMap[K]) => void

    Returns MapsEventListener

getDynamicAttributeState

  • getDynamicAttributeState(): {
        data: null
        | TUserData;
        map: MapState;
        marker: MarkerState;
    }
    Internal

    Retrieve the parameters to be passed to dynamic attribute callbacks. This method is part of the internal API used by the ComputedMarkerAttributes.

    Returns { data: null | TUserData; map: MapState; marker: MarkerState }

setAttributes

setData

update

  • update(): void

    Schedules an update of the marker, writing all attribute values to the underlying advanced marker objects. Calling this manually should not be needed.

    Returns void

StaticregisterIconProvider

  • registerIconProvider(provider: IconProvider, namespace?: string): void

    Registers a new icon provider that resolves the value of the icon-attribute to something that can be used as glyph. When multiple providers are used, you can additionally provide a namespace for the icons.

    For example:

    marker.icon = 'star'; // requests the 'star' icon from the 'default' provider
marker.icon = 'other:star'; // requests the icon from the 'other' provider

    Parameters

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods