/** * 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 {};