UNPKG

@deatog/react-google-maps-api

Version:
57 lines (56 loc) 4.57 kB
import React, { type JSX, type ReactNode, PureComponent, type ContextType } from 'react'; import MapContext from '../../map-context'; import type { Clusterer } from '@deatog/react-google-maps-marker-clusterer'; import type { MarkerClusterer as GoogleClusterer } from '@googlemaps/markerclusterer'; export type AdvancedMarkerProps = { children?: ReactNode | undefined; /** Specifies how and advanced marker should behave when it collides with another advanced marker or with the basemap labels on a vector map. */ collisionBehavior?: google.maps.CollisionBehavior | undefined; /** If true, the advanced marker will be clickable and trigger the onGmpClick event, and will be interactive for accessibility purposes (e.g. allowing keyboard navigation via arrow keys). * Default: false */ clickable?: boolean | undefined; /** If true, the advanced marker can be dragged. Note: Advanced markers with altitude are not draggable. * Default: false */ draggable?: boolean | undefined; /** The position of the advanced marker. An advanced marker may be constructed without a position but will not be displayed until its position is provided. */ position?: google.maps.LatLng | google.maps.LatLngLiteral | google.maps.LatLngAltitude | google.maps.LatLngAltitudeLiteral; /** Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the advanced marker with the provided value. */ title?: string | undefined; /** All advanced markers are displayed on the map in order of their zIndex, with higher values displaying in front of advanced markers with lower values. By default, advanced markers are displayed according to their vertical position on the screen, with lower advanced markers appearing in front of advanced markers 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. */ zIndex?: number | undefined; /** Render prop that handles clustering markers */ clusterer?: Clusterer | GoogleClusterer | undefined; /** Clusters are redrawn when a Marker is added unless noClustererRedraw? is set to true. */ noClustererRedraw?: boolean | undefined; /** This event is fired when the advanced marker element is clicked and clickable is true. */ onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined; /** This event is fires when the advanced marker element is right clicked and clickable is true. */ onRightClick?: ((e: PointerEvent) => void) | undefined; /** This event is repeatedly fired while the user drags the advanced marker and draggable is true. */ onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined; /** This event is fired when the user stops dragging the advanced marker. */ onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined; /** This event is fired when the user starts dragging the advanced marker. */ onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined; /** This callback is called when the marker instance has loaded. It is called with the advanced marker instance. */ onLoad?: ((marker: google.maps.marker.AdvancedMarkerElement) => void) | undefined; /** This callback is called when the component unmounts. It is called with the advanced marker instance. */ onUnmount?: ((marker: google.maps.marker.AdvancedMarkerElement) => void) | undefined; }; export declare const AdvancedMarkerContext: React.Context<google.maps.marker.AdvancedMarkerElement | null>; declare function AdvancedMarkerFunctional({ children, collisionBehavior, clickable, clusterer, noClustererRedraw, draggable, position, title, zIndex, onClick, onRightClick, onDrag, onDragEnd, onDragStart, onLoad, onUnmount, }: AdvancedMarkerProps): JSX.Element | null; export declare const AdvancedMarkerF: React.MemoExoticComponent<typeof AdvancedMarkerFunctional>; export declare class AdvancedMarker extends PureComponent<AdvancedMarkerProps> { static contextType: React.Context<google.maps.Map | null>; context: ContextType<typeof MapContext>; marker: google.maps.marker.AdvancedMarkerElement | undefined; content: DocumentFragment; registeredEvents: google.maps.MapsEventListener[]; componentDidMount(): Promise<void>; componentDidUpdate(prevProps: Readonly<AdvancedMarkerProps>): void; componentWillUnmount(): void; render(): ReactNode; } export default AdvancedMarker;