/**
* Copyright 2023 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
///
import type { IconProvider } from './icons';
import type { Attributes } from './marker-attributes';
import type { MapState } from './map-state-observer';
/**
* The Marker class.
*
* @typeParam TUserData - Can be used to specify a type for the data specified
* in {@link Marker.setData} and available in dynamic attribute callbacks.
*/
export declare class Marker {
private static iconProviders;
/**
* 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
*
* @param provider
* @param namespace
*/
static registerIconProvider(provider: IconProvider, namespace?: string): void;
/** The position of the marker on the map. */
position?: Attributes['position'];
/**
* 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.
*/
draggable?: Attributes['draggable'];
/**
* The collision behavior controls how the marker interacts with other markers
* and labels on the map. See {@link CollisionBehavior} for more information.
*/
collisionBehavior?: Attributes['collisionBehavior'];
/**
* The title of the marker element. Will be shown in the browsers default
* tooltip and should be provided for accessibility reasons.
*/
title?: Attributes['title'];
/**
* Defines the z-ordering for the marker and is used to compute the priority
* for collision handling. See [the official documentation][gmp-marker-zindex]
* for more information.
*
* [gmp-marker-zindex]: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.zIndex
*/
zIndex?: Attributes['zIndex'];
/**
* 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.
*/
glyph?: Attributes['glyph'];
/** The scale of the marker as a multiple of the original scale. */
scale?: Attributes['scale'];
/**
* 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.
*/
color?: Attributes['color'];
/**
* The background-color for the marker pin. Can be specified in any format
* supported by CSS.
*/
backgroundColor?: Attributes['backgroundColor'];
/**
* The border-color for the marker pin. Can be specified in any format
* supported by CSS.
*/
borderColor?: Attributes['borderColor'];
/**
* The color of the glyph within the marker pin. Can be specified in any
* format supported by CSS.
*/
glyphColor?: Attributes['glyphColor'];
/**
* The id of an icon to be fetched via the {@link icons.IconProvider}. The
* resulting icon will be shown
*/
icon?: Attributes['icon'];
/**
* 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)`).
*/
content?: Attributes['content'];
/**
* A single classname or list of class names to be added to the content
* element.
*/
classList?: Attributes['classList'];
/** The map instance the marker is added to. */
private map_;
/**
* The map-observer receives the `bounds_changed` event from the map-instances
* and provides the map-data for the dynamic attributes.
*/
private mapObserver_;
/**
* All listeners bound to the marker, it's dom-element or the map-instance are
* stored here, so they can be easily removed when the marker is removed from
* the map.
*
* @see Marker.bindEvents_()
* @see Marker.unbindEvents_()
*/
private mapEventListeners_;
/**
* User-data that has been passed to the constructor or the
* {@link Marker.setData} method.
*/
private data_;
/**
* Special state attributes of the marker that are made available in dynamic
* attribute callbacks.
*/
private markerState_;
/** Attributes set by the user. */
private attributes_;
/**
* 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.
*/
protected attributeDefaults_: Partial>;
/**
* Computed attributes take care of resolving the dynamic attributes into the
* static values at the time of evaluation.
*/
private readonly computedAttributes_;
private markerView_;
private pinView_;
/**
* Internal flag to prevent multiple updates in the same execution frame
* (updates start as microtasks after being requested)
*/
private updateScheduled_;
/**
* Creates a new marker instance. Markers can be created without any options,
* or with any number of attributes set.
*
* @param options
* @param data
*/
constructor(options?: MarkerOptions, data?: TUserData);
/**
* 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.
*
* @param eventName 'click', 'dragstart', 'dragend', 'drag' or any DOM
* event-name.
* @param handler
*/
addListener(eventName: K, handler: (ev: GoogleMapsAMVEventMap[K]) => void): google.maps.MapsEventListener;
addListener(eventName: K, handler: (ev: HTMLElementEventMap[K]) => void): google.maps.MapsEventListener;
/**
* Stores the map-instance. The map will be passed on to the
* AdvancedMarkerElement in `performUpdate()`.
*/
get map(): google.maps.Map | null;
set map(map: google.maps.Map | null);
/**
* Sets the data for this marker and triggers an update.
*
* @param data
*/
setData(data: TUserData): void;
/**
* Sets multiple attributes at once.
*
* @param attributes
*/
setAttributes(attributes: Partial>): void;
/**
* Schedules an update of the marker, writing all attribute values to the
* underlying advanced marker objects. Calling this manually should not be
* needed.
*/
update(): void;
/**
* Updates the rendered objects for this marker, typically an
* AdvancedMarkerElement and PinElement. This method is called very often, so
* it is critical to keep it as performant as possible:
*
* - Avoid object allocations if possible
* - Avoid expensive computations. These can likely be moved into setAttribute_
* or the ComputedMarkerAttributes class
*/
private performUpdate;
/**
* Updates the content element, it's classes and css custom properties.
*
* @param attrs
*/
private updateContent_;
/**
* Updates the colors for the embedded pin-view based on the different color
* attributes.
*
* @param attributes
*/
private updateColors_;
/**
* Updates the pinelement glyph based on the `icon` and `glyph` attributes.
*
* @param attrs
*/
private updateGlyph_;
/** Binds the required dom- and map-events to the marker-instance. */
private bindEvents_;
/** Unbinds all event listeners from the marker. */
private unbindEvents_;
/**
* Retrieve the parameters to be passed to dynamic attribute callbacks. This
* method is part of the internal API used by the ComputedMarkerAttributes.
*
* @internal
*/
getDynamicAttributeState(): {
data: TUserData | null;
map: MapState;
marker: MarkerState;
};
}
/**
* The CollisionBehaviour enum is copied from Google Maps typings in order to
* allow those to be used before the api has loaded.
*/
export declare enum CollisionBehavior {
/**
* 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.
*/
OPTIONAL_AND_HIDES_LOWER_PRIORITY = "OPTIONAL_AND_HIDES_LOWER_PRIORITY",
/**
* Always display the marker regardless of collision. This is the default
* behavior.
*/
REQUIRED = "REQUIRED",
/**
* Always display the marker regardless of collision, and hide any
* OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with
* the marker.
*/
REQUIRED_AND_HIDES_OPTIONAL = "REQUIRED_AND_HIDES_OPTIONAL"
}
/**
* The single options argument for the marker-class contains the attributes as
* well as additional options.
*
* @typeParam TUserData - The type of the user-specified data passed to
* `setData()` and made available in the arguments of the dynamic attribute
* callbacks.
*/
export type MarkerOptions = {
map?: google.maps.Map | null;
} & Partial>;
/**
* The MarkerState contains additional state-information about the marker
* itself.
*/
export type MarkerState = {
hovered: boolean;
content: HTMLElement;
};
/**
* Maps the supported Google Maps events to the type of event-object the
* callbacks will receive.
*/
interface GoogleMapsAMVEventMap {
click: google.maps.MapMouseEvent;
dragstart: google.maps.MapMouseEvent;
drag: google.maps.MapMouseEvent;
dragend: google.maps.MapMouseEvent;
}
export {};