(null)\n\n useEffect(() => {\n if (map && markerClusterer === null) {\n const markerCluster = new MarkerClusterer({ ...options, map })\n\n setMarkerClusterer(markerCluster)\n }\n }, [map])\n\n return markerClusterer\n}\n\n/** Wrapper around [@googlemaps/markerclusterer](https://github.com/googlemaps/js-markerclusterer)\n *\n * Accepts {@link MarkerClustererOptionsSubset} which is a subset of {@link MarkerClustererOptions}\n */\nfunction GoogleMarkerClusterer({ children, options }: GoogleMarkerClustererProps) {\n const markerClusterer = useGoogleMarkerClusterer(options)\n\n return markerClusterer !== null ? children(markerClusterer) : null\n}\n\nexport default memo(GoogleMarkerClusterer)\n","/* global google */\nimport {\n memo,\n useRef,\n Children,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ReactNode,\n type ReactPortal,\n type ContextType,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\n\nimport MapContext from '../../map-context'\nimport invariant from 'invariant'\n\nconst eventMap = {\n onCloseClick: 'closeclick',\n onContentChanged: 'content_changed',\n onDomReady: 'domready',\n onPositionChanged: 'position_changed',\n onZindexChanged: 'zindex_changed',\n}\n\nconst updaterMap = {\n options(instance: google.maps.InfoWindow, options: google.maps.InfoWindowOptions): void {\n instance.setOptions(options)\n },\n position(\n instance: google.maps.InfoWindow,\n position: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n instance.setPosition(position)\n },\n zIndex(instance: google.maps.InfoWindow, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\ninterface InfoWindowState {\n infoWindow: google.maps.InfoWindow | null\n}\n\nexport interface InfoWindowProps {\n children?: ReactNode | undefined\n /** Can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset. The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow. */\n anchor?: google.maps.MVCObject | undefined\n options?: google.maps.InfoWindowOptions | undefined\n /** The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used instead. */\n position?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n /** All InfoWindows are displayed on the map in order of their zIndex, with higher values displaying in front of InfoWindows with lower values. By default, InfoWindows are displayed according to their latitude, with InfoWindows of lower latitudes appearing in front of InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers. */\n zIndex?: number | undefined\n /** This event is fired when the close button was clicked. */\n onCloseClick?: (() => void) | undefined\n /** This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically. */\n onDomReady?: (() => void) | undefined\n /** This event is fired when the content property changes. */\n onContentChanged?: (() => void) | undefined\n /** This event is fired when the position property changes. */\n onPositionChanged?: (() => void) | undefined\n /** This event is fired when the InfoWindow's zIndex changes. */\n onZindexChanged?: (() => void) | undefined\n /** This callback is called when the infoWindow instance has loaded. It is called with the infoWindow instance. */\n onLoad?: ((infoWindow: google.maps.InfoWindow) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the infoWindow instance. */\n onUnmount?: ((infoWindow: google.maps.InfoWindow) => void) | undefined\n}\n\nfunction InfoWindowFunctional({\n children,\n anchor,\n options,\n position,\n zIndex,\n onCloseClick,\n onDomReady,\n onContentChanged,\n onPositionChanged,\n onZindexChanged,\n onLoad,\n onUnmount\n}: InfoWindowProps): ReactPortal | null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [closeclickListener, setCloseClickListener] = useState(null)\n const [domreadyclickListener, setDomReadyClickListener] = useState(null)\n const [contentchangedclickListener, setContentChangedClickListener] = useState(null)\n const [positionchangedclickListener, setPositionChangedClickListener] = useState(null)\n const [zindexchangedclickListener, setZindexChangedClickListener] = useState(null)\n\n const containerElementRef = useRef(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.close()\n\n if (anchor) {\n instance.open(map, anchor)\n } else if (instance.getPosition()) {\n instance.open(map)\n }\n }\n }, [map, instance, anchor])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (position && instance !== null) {\n instance.setPosition(position)\n }\n }, [position])\n\n useEffect(() => {\n if (typeof zIndex === 'number' && instance !== null) {\n instance.setZIndex(zIndex)\n }\n }, [zIndex])\n\n useEffect(() => {\n if (instance && onCloseClick) {\n if (closeclickListener !== null) {\n google.maps.event.removeListener(closeclickListener)\n }\n\n setCloseClickListener(\n google.maps.event.addListener(instance, 'closeclick', onCloseClick)\n )\n }\n }, [onCloseClick])\n\n useEffect(() => {\n if (instance && onDomReady) {\n if (domreadyclickListener !== null) {\n google.maps.event.removeListener(domreadyclickListener)\n }\n\n setDomReadyClickListener(\n google.maps.event.addListener(instance, 'domready', onDomReady)\n )\n }\n }, [onDomReady])\n\n useEffect(() => {\n if (instance && onContentChanged) {\n if (contentchangedclickListener !== null) {\n google.maps.event.removeListener(contentchangedclickListener)\n }\n\n setContentChangedClickListener(\n google.maps.event.addListener(instance, 'content_changed', onContentChanged)\n )\n }\n }, [onContentChanged])\n\n useEffect(() => {\n if (instance && onPositionChanged) {\n if (positionchangedclickListener !== null) {\n google.maps.event.removeListener(positionchangedclickListener)\n }\n\n setPositionChangedClickListener(\n google.maps.event.addListener(instance, 'position_changed', onPositionChanged)\n )\n }\n }, [onPositionChanged])\n\n useEffect(() => {\n if (instance && onZindexChanged) {\n if (zindexchangedclickListener !== null) {\n google.maps.event.removeListener(zindexchangedclickListener)\n }\n\n setZindexChangedClickListener(\n google.maps.event.addListener(instance, 'zindex_changed', onZindexChanged)\n )\n }\n }, [onZindexChanged])\n\n useEffect(() => {\n const infoWindow = new google.maps.InfoWindow({\n ...(options || {}),\n })\n\n setInstance(infoWindow)\n\n containerElementRef.current = document.createElement('div')\n\n if (onCloseClick) {\n setCloseClickListener(\n google.maps.event.addListener(infoWindow, 'closeclick', onCloseClick)\n )\n }\n\n if (onDomReady) {\n setDomReadyClickListener(\n google.maps.event.addListener(infoWindow, 'domready', onDomReady)\n )\n }\n\n if (onContentChanged) {\n setContentChangedClickListener(\n google.maps.event.addListener(infoWindow, 'content_changed', onContentChanged)\n )\n }\n\n if (onPositionChanged) {\n setPositionChangedClickListener(\n google.maps.event.addListener(infoWindow, 'position_changed', onPositionChanged)\n )\n }\n\n if (onZindexChanged) {\n setZindexChangedClickListener(\n google.maps.event.addListener(infoWindow, 'zindex_changed', onZindexChanged)\n )\n }\n\n infoWindow.setContent(containerElementRef.current)\n\n if (position) {\n infoWindow.setPosition(position)\n }\n\n if (zIndex) {\n infoWindow.setZIndex(zIndex)\n }\n\n if (anchor) {\n infoWindow.open(map, anchor)\n } else if (infoWindow.getPosition()) {\n infoWindow.open(map)\n } else {\n invariant(\n false,\n `You must provide either an anchor (typically render it inside a ) or a position props for .`\n )\n }\n\n if (onLoad) {\n onLoad(infoWindow)\n }\n\n return () => {\n if (closeclickListener) {\n google.maps.event.removeListener(closeclickListener)\n }\n\n if (contentchangedclickListener) {\n google.maps.event.removeListener(contentchangedclickListener)\n }\n\n if (domreadyclickListener) {\n google.maps.event.removeListener(domreadyclickListener)\n }\n\n if (positionchangedclickListener) {\n google.maps.event.removeListener(positionchangedclickListener)\n }\n\n if (zindexchangedclickListener) {\n google.maps.event.removeListener(zindexchangedclickListener)\n }\n\n if (onUnmount) {\n onUnmount(infoWindow)\n }\n\n infoWindow.close()\n }\n }, [])\n\n return containerElementRef.current ? (\n createPortal(Children.only(children), containerElementRef.current)\n ) : (\n null\n )\n}\n\nexport const InfoWindowF = memo(InfoWindowFunctional)\n\nexport class InfoWindow extends PureComponent {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: HTMLElement | null = null\n\n override state: InfoWindowState = {\n infoWindow: null,\n }\n\n open = (infoWindow: google.maps.InfoWindow, anchor?: google.maps.MVCObject | undefined): void => {\n if (anchor) {\n infoWindow.open(this.context, anchor)\n } else if (infoWindow.getPosition()) {\n infoWindow.open(this.context)\n } else {\n invariant(\n false,\n `You must provide either an anchor (typically render it inside a ) or a position props for .`\n )\n }\n }\n\n setInfoWindowCallback = (): void => {\n if (this.state.infoWindow !== null && this.containerElement !== null) {\n this.state.infoWindow.setContent(this.containerElement)\n\n this.open(this.state.infoWindow, this.props.anchor)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.infoWindow)\n }\n }\n }\n\n override componentDidMount(): void {\n const infoWindow = new google.maps.InfoWindow({\n ...(this.props.options || {}),\n })\n\n this.containerElement = document.createElement('div')\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: infoWindow,\n })\n\n this.setState(() => {\n return {\n infoWindow,\n }\n }, this.setInfoWindowCallback)\n }\n\n override componentDidUpdate(prevProps: InfoWindowProps): void {\n if (this.state.infoWindow !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.infoWindow,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.infoWindow !== null) {\n unregisterEvents(this.registeredEvents)\n\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.infoWindow)\n }\n\n this.state.infoWindow.close()\n }\n }\n\n override render(): ReactPortal | null {\n return this.containerElement ? (\n createPortal(Children.only(this.props.children), this.containerElement)\n ) : (\n null\n )\n }\n}\n\nexport default InfoWindow\n","import { type ContextType, PureComponent, useState, useContext, useEffect, memo } from 'react'\n\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\n\nimport MapContext from '../../map-context'\n\nconst eventMap = {\n onClick: 'click',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMouseDown: 'mousedown',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n draggable(instance: google.maps.Polyline, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Polyline, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Polyline, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(instance: google.maps.Polyline, options: google.maps.PolylineOptions): void {\n instance.setOptions(options)\n },\n path(\n instance: google.maps.Polyline,\n path:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n ): void {\n instance.setPath(path)\n },\n visible(instance: google.maps.Polyline, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ninterface PolylineState {\n polyline: google.maps.Polyline | null\n}\n\nexport interface PolylineProps {\n options?: google.maps.PolylineOptions | undefined\n /** If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. */\n draggable?: boolean | undefined\n /** If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. */\n editable?: boolean | undefined\n /** Hides this poly if set to false. */\n visible?: boolean | undefined\n /** Sets the path. The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map. */\n path?:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n | undefined\n /** This event is fired when the DOM dblclick event is fired on the Polyline. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the polyline. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user starts dragging the polyline. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the Polyline. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the Polyline. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polyline mouseout. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polyline mouseover. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the Polyline. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the Polyline is right-clicked on. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the Polyline. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the polyline. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This callback is called when the polyline instance has loaded. It is called with the polyline instance. */\n onLoad?: ((polyline: google.maps.Polyline) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the polyline instance. */\n onUnmount?: ((polyline: google.maps.Polyline) => void) | undefined\n}\n\nconst defaultOptions = {}\n\nfunction PolylineFunctional({\n options,\n draggable,\n editable,\n visible,\n path,\n onDblClick,\n onDragEnd,\n onDragStart,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onClick,\n onDrag,\n onLoad,\n onUnmount,\n}: PolylineProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] = useState(null)\n const [dragendListener, setDragendListener] = useState(null)\n const [dragstartListener, setDragstartListener] = useState(null)\n const [mousedownListener, setMousedownListener] = useState(null)\n const [mousemoveListener, setMousemoveListener] = useState(null)\n const [mouseoutListener, setMouseoutListener] = useState(null)\n const [mouseoverListener, setMouseoverListener] = useState(null)\n const [mouseupListener, setMouseupListener] = useState(null)\n const [rightclickListener, setRightclickListener] = useState(null)\n const [clickListener, setClickListener] = useState(null)\n const [dragListener, setDragListener] = useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (typeof editable !== 'undefined' && instance !== null) {\n instance.setEditable(editable)\n }\n }, [instance, editable])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n if (typeof path !== 'undefined' && instance !== null) {\n instance.setPath(path)\n }\n }, [instance, path])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(\n google.maps.event.addListener(instance, 'drag', onDrag)\n )\n }\n }, [onDrag])\n\n useEffect(() => {\n const polyline = new google.maps.Polyline({\n ...(options || defaultOptions),\n map,\n })\n\n if (path) {\n polyline.setPath(path)\n }\n\n if (typeof visible !== 'undefined') {\n polyline.setVisible(visible)\n }\n\n if (typeof editable !== 'undefined') {\n polyline.setEditable(editable)\n }\n\n if (typeof draggable !== 'undefined') {\n polyline.setDraggable(draggable)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(polyline, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(polyline, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(polyline, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(polyline, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(polyline, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(polyline, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(polyline, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(polyline, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(polyline, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(\n google.maps.event.addListener(polyline, 'click', onClick)\n )\n }\n\n if (onDrag) {\n setDragListener(\n google.maps.event.addListener(polyline, 'drag', onDrag)\n )\n }\n\n setInstance(polyline)\n\n if (onLoad) {\n onLoad(polyline)\n }\n\n return () => {\n\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (onUnmount) {\n onUnmount(polyline)\n }\n\n polyline.setMap(null)\n }\n }, [])\n\n return null\n}\n\nexport const PolylineF = memo(PolylineFunctional)\n\nexport class Polyline extends PureComponent