containing the InfoBox'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\n /** This event is fired when the content property changes. */\n onContentChanged?: () => void\n /** This event is fired when the position property changes. */\n onPositionChanged?: () => void\n /** This event is fired when the InfoBox's zIndex changes. */\n onZindexChanged?: () => void\n /** This callback is called when the infoBox instance has loaded. It is called with the infoBox instance. */\n onLoad?: (infoBox: GoogleMapsInfoBox) => void\n /** This callback is called when the component unmounts. It is called with the infoBox instance. */\n onUnmount?: (infoBox: GoogleMapsInfoBox) => void\n}\n\nexport class InfoBoxComponent extends React.PureComponent
{\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: HTMLElement | null = null\n\n state: InfoBoxState = {\n infoBox: null,\n }\n\n open = (infoBox: GoogleMapsInfoBox, anchor?: google.maps.MVCObject): void => {\n if (anchor) {\n infoBox.open(this.context, anchor)\n } else if (infoBox.getPosition()) {\n infoBox.open(this.context)\n } else {\n invariant(false, 'You must provide either an anchor or a position prop for .')\n }\n }\n\n setInfoBoxCallback = (): void => {\n const { anchor, onLoad } = this.props\n const { infoBox } = this.state\n\n if (infoBox !== null && this.containerElement !== null) {\n infoBox.setContent(this.containerElement)\n this.open(infoBox, anchor)\n\n if (onLoad) {\n onLoad(infoBox)\n }\n }\n }\n\n componentDidMount(): void {\n const { options } = this.props\n const { position, ...infoBoxOptions }: InfoBoxOptions = options || {}\n\n let positionLatLng: google.maps.LatLng | undefined\n if (position && !(position instanceof google.maps.LatLng)) {\n positionLatLng = new google.maps.LatLng(position.lat, position.lng)\n }\n\n const infoBox = new GoogleMapsInfoBox({\n ...infoBoxOptions,\n ...(positionLatLng ? { position: positionLatLng } : {}),\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: infoBox,\n })\n\n this.setState({ infoBox }, this.setInfoBoxCallback)\n }\n\n componentDidUpdate(prevProps: InfoBoxProps): void {\n const { infoBox } = this.state\n\n if (infoBox !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: infoBox,\n })\n }\n }\n\n componentWillUnmount(): void {\n const { onUnmount } = this.props\n const { infoBox } = this.state\n\n if (infoBox !== null) {\n if (onUnmount) {\n onUnmount(infoBox)\n }\n\n unregisterEvents(this.registeredEvents)\n infoBox.close()\n }\n }\n\n render(): React.ReactPortal | null {\n if (!this.containerElement) {\n return null\n }\n\n return ReactDOM.createPortal(React.Children.only(this.props.children), this.containerElement)\n }\n}\n\nexport default InfoBoxComponent\n","/* global google */\nimport * as React from 'react'\nimport * as ReactDOM 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 /** 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\n options?: google.maps.InfoWindowOptions\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\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\n /** This event is fired when the close button was clicked. */\n onCloseClick?: () => void\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\n /** This event is fired when the content property changes. */\n onContentChanged?: () => void\n /** This event is fired when the position property changes. */\n onPositionChanged?: () => void\n /** This event is fired when the InfoWindow's zIndex changes. */\n onZindexChanged?: () => void\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\n /** This callback is called when the component unmounts. It is called with the infoWindow instance. */\n onUnmount?: (infoWindow: google.maps.InfoWindow) => void\n}\n\nexport class InfoWindow extends React.PureComponent
{\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: HTMLElement | null = null\n\n state: InfoWindowState = {\n infoWindow: null,\n }\n\n open = (infoWindow: google.maps.InfoWindow, anchor?: google.maps.MVCObject): 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 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(function setInfoWindow() {\n return {\n infoWindow,\n }\n }, this.setInfoWindowCallback)\n }\n\n 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 componentWillUnmount(): void {\n if (this.state.infoWindow !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.state.infoWindow.close()\n }\n }\n\n render(): React.ReactPortal | React.ReactNode {\n return this.containerElement ? (\n ReactDOM.createPortal(React.Children.only(this.props.children), this.containerElement)\n ) : (\n <>\n )\n }\n}\n\nexport default InfoWindow\n","import * as React 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\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\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\n /** Hides this poly if set to false. */\n visible?: boolean\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 /** This event is fired when the DOM dblclick event is fired on the Polyline. */\n onDblClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user stops dragging the polyline. */\n onDragEnd?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user starts dragging the polyline. */\n onDragStart?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousedown event is fired on the Polyline. */\n onMouseDown?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousemove event is fired on the Polyline. */\n onMouseMove?: (e: google.maps.MouseEvent) => void\n /** This event is fired on Polyline mouseout. */\n onMouseOut?: (e: google.maps.MouseEvent) => void\n /** This event is fired on Polyline mouseover. */\n onMouseOver?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mouseup event is fired on the Polyline. */\n onMouseUp?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the Polyline is right-clicked on. */\n onRightClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM click event is fired on the Polyline. */\n onClick?: (e: google.maps.MouseEvent) => void\n /** This event is repeatedly fired while the user drags the polyline. */\n onDrag?: (e: google.maps.MouseEvent) => void\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\n /** This callback is called when the component unmounts. It is called with the polyline instance. */\n onUnmount?: (polyline: google.maps.Polyline) => void\n}\n\nexport class Polyline extends React.PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: PolylineState = {\n polyline: null,\n }\n\n setPolylineCallback = (): void => {\n if (this.state.polyline !== null && this.props.onLoad) {\n this.props.onLoad(this.state.polyline)\n }\n }\n\n componentDidMount(): void {\n const polyline = new google.maps.Polyline({\n ...(this.props.options || {}),\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: polyline,\n })\n\n this.setState(function setPolyline() {\n return {\n polyline,\n }\n }, this.setPolylineCallback)\n }\n\n componentDidUpdate(prevProps: PolylineProps): void {\n if (this.state.polyline !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.polyline,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.polyline !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.polyline)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.polyline.setMap(null)\n }\n }\n\n render(): React.ReactNode {\n return <>\n }\n}\n\nexport default Polyline\n","/* global google */\nimport * as React 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.Polygon, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Polygon, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Polygon, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(instance: google.maps.Polygon, options: google.maps.PolygonOptions): void {\n instance.setOptions(options)\n },\n path(\n instance: google.maps.Polygon,\n path:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n ): void {\n instance.setPath(path)\n },\n\n paths(\n instance: google.maps.Polygon,\n paths:\n | google.maps.MVCArray\n | google.maps.MVCArray>\n | google.maps.LatLng[]\n | google.maps.LatLng[][]\n | google.maps.LatLngLiteral[]\n | google.maps.LatLngLiteral[][]\n ): void {\n instance.setPaths(paths)\n },\n\n visible(instance: google.maps.Polygon, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ninterface PolygonState {\n polygon: google.maps.Polygon | null\n}\n\nexport interface PolygonProps {\n options?: google.maps.PolygonOptions\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\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\n /** Hides this poly if set to false. */\n visible?: boolean\n /** Sets the first path. See Paths for more details. */\n path?:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n /** Sets the path for this polygon. The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into MVCArrays. Inserting or removing LatLngs from the MVCArray will automatically update the polygon on the map. */\n paths?:\n | google.maps.MVCArray\n | google.maps.MVCArray>\n | google.maps.LatLng[]\n | google.maps.LatLng[][]\n | google.maps.LatLngLiteral[]\n | google.maps.LatLngLiteral[][]\n /** This event is fired when the DOM dblclick event is fired on the Polygon. */\n onDblClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user stops dragging the polygon. */\n onDragEnd?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user starts dragging the polygon. */\n onDragStart?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousedown event is fired on the Polygon. */\n onMouseDown?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousemove event is fired on the Polygon. */\n onMouseMove?: (e: google.maps.MouseEvent) => void\n /** This event is fired on Polygon mouseout. */\n onMouseOut?: (e: google.maps.MouseEvent) => void\n /** This event is fired on Polygon mouseover. */\n onMouseOver?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mouseup event is fired on the Polygon. */\n onMouseUp?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the Polygon is right-clicked on. */\n onRightClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM click event is fired on the Polygon. */\n onClick?: (e: google.maps.MouseEvent) => void\n /** This event is repeatedly fired while the user drags the polygon. */\n onDrag?: (e: google.maps.MouseEvent) => void\n /** This callback is called when the polygon instance has loaded. It is called with the polygon instance. */\n onLoad?: (polygon: google.maps.Polygon) => void\n /** This callback is called when the component unmounts. It is called with the polygon instance. */\n onUnmount?: (polygon: google.maps.Polygon) => void\n}\n\nexport class Polygon extends React.PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: PolygonState = {\n polygon: null,\n }\n\n setPolygonCallback = (): void => {\n if (this.state.polygon !== null && this.props.onLoad) {\n this.props.onLoad(this.state.polygon)\n }\n }\n\n componentDidMount(): void {\n const polygon = new google.maps.Polygon({\n ...(this.props.options || {}),\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: polygon,\n })\n\n this.setState(function setPolygon() {\n return {\n polygon,\n }\n }, this.setPolygonCallback)\n }\n\n componentDidUpdate(prevProps: PolygonProps): void {\n if (this.state.polygon !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.polygon,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.polygon !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.polygon)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.polygon && this.state.polygon.setMap(null)\n }\n }\n\n render(): React.ReactNode {\n return null\n }\n}\n\nexport default Polygon\n","import * as React from 'react'\n\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\nimport MapContext from '../../map-context'\n\nconst eventMap = {\n onBoundsChanged: 'bounds_changed',\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 bounds(\n instance: google.maps.Rectangle,\n bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n ): void {\n instance.setBounds(bounds)\n },\n draggable(instance: google.maps.Rectangle, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Rectangle, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Rectangle, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(instance: google.maps.Rectangle, options: google.maps.RectangleOptions): void {\n instance.setOptions(options)\n },\n visible(instance: google.maps.Rectangle, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ninterface RectangleState {\n rectangle: google.maps.Rectangle | null\n}\n\nexport interface RectangleProps {\n options?: google.maps.RectangleOptions\n /** Sets the bounds of this rectangle. */\n bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n /** If set to true, the user can drag this rectangle over the map. */\n draggable?: boolean\n /** If set to true, the user can edit this rectangle by dragging the control points shown at the corners and on each edge. */\n editable?: boolean\n /** Hides this rectangle if set to false. */\n visible?: boolean\n /** Indicates whether this Rectangle handles mouse events. Defaults to true. */\n clickable?: boolean\n /** This event is fired when the DOM dblclick event is fired on the rectangle. */\n onDblClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user stops dragging the rectangle. */\n onDragEnd?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user starts dragging the rectangle. */\n onDragStart?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousedown event is fired on the rectangle. */\n onMouseDown?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousemove event is fired on the rectangle. */\n onMouseMove?: (e: google.maps.MouseEvent) => void\n /** This event is fired on rectangle mouseout. */\n onMouseOut?: (e: google.maps.MouseEvent) => void\n /** This event is fired on rectangle mouseover. */\n onMouseOver?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mouseup event is fired on the rectangle. */\n onMouseUp?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the rectangle is right-clicked on. */\n onRightClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM click event is fired on the rectangle. */\n onClick?: (e: google.maps.MouseEvent) => void\n /** This event is repeatedly fired while the user drags the rectangle. */\n onDrag?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the rectangle's bounds are changed. */\n onBoundsChanged?: () => void\n /** This callback is called when the rectangle instance has loaded. It is called with the rectangle instance. */\n onLoad?: (rectangle: google.maps.Rectangle) => void\n /** This callback is called when the component unmounts. It is called with the rectangle instance. */\n onUnmount?: (rectangle: google.maps.Rectangle) => void\n}\n\nexport class Rectangle extends React.PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: RectangleState = {\n rectangle: null,\n }\n\n setRectangleCallback = (): void => {\n if (this.state.rectangle !== null && this.props.onLoad) {\n this.props.onLoad(this.state.rectangle)\n }\n }\n\n componentDidMount(): void {\n const rectangle = new google.maps.Rectangle({\n ...(this.props.options || {}),\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: rectangle,\n })\n\n this.setState(function setRectangle() {\n return {\n rectangle,\n }\n }, this.setRectangleCallback)\n }\n\n componentDidUpdate(prevProps: RectangleProps): void {\n if (this.state.rectangle !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.rectangle,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.rectangle !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.rectangle)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.rectangle.setMap(null)\n }\n }\n\n render(): React.ReactNode {\n return <>\n }\n}\n\nexport default Rectangle\n","import * as React from 'react'\n\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\n\nimport MapContext from '../../map-context'\n\nconst eventMap = {\n onCenterChanged: 'center_changed',\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 onRadiusChanged: 'radius_changed',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n center(instance: google.maps.Circle, center: google.maps.LatLng): void {\n instance.setCenter(center)\n },\n draggable(instance: google.maps.Circle, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Circle, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Circle, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(instance: google.maps.Circle, options: google.maps.CircleOptions): void {\n instance.setOptions(options)\n },\n radius(instance: google.maps.Circle, radius: number): void {\n instance.setRadius(radius)\n },\n visible(instance: google.maps.Circle, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ninterface CircleState {\n circle: google.maps.Circle | null\n}\n\nexport interface CircleProps {\n options?: google.maps.CircleOptions\n\n // required\n /** sets the center of the circle */\n center: google.maps.LatLng | google.maps.LatLngLiteral\n\n // required\n /** Sets the radius of this circle (in meters) */\n radius: number\n /** If set to true, the user can drag this circle over the map */\n draggable?: boolean\n /** If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. */\n editable?: boolean\n /** Hides this circle if set to false. */\n visible?: boolean\n /** This event is fired when the DOM dblclick event is fired on the circle. */\n onDblClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user stops dragging the circle. */\n onDragEnd?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the user starts dragging the circle. */\n onDragStart?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousedown event is fired on the circle. */\n onMouseDown?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mousemove event is fired on the circle. */\n onMouseMove?: (e: google.maps.MouseEvent) => void\n /** This event is fired on circle mouseout. */\n onMouseOut?: (e: google.maps.MouseEvent) => void\n /** This event is fired on circle mouseover. */\n onMouseOver?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the DOM mouseup event is fired on the circle. */\n onMouseUp?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the circle is right-clicked on. */\n onRightClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the circle's center is changed. */\n onCenterChanged?: () => void\n /** This event is fired when the DOM click event is fired on the circle. */\n onClick?: (e: google.maps.MouseEvent) => void\n /** This event is repeatedly fired while the user drags the circle. */\n onDrag?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the circle's radius is changed. */\n onRadiusChanged?: () => void\n /** This callback is called when the circle instance has loaded. It is called with the circle instance. */\n onLoad?: (circle: google.maps.Circle) => void\n /** This callback is called when the component unmounts. It is called with the circle instance. */\n onUnmount?: (circle: google.maps.Circle) => void\n}\n\nexport class Circle extends React.PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: CircleState = {\n circle: null,\n }\n\n setCircleCallback = (): void => {\n if (this.state.circle !== null && this.props.onLoad) {\n this.props.onLoad(this.state.circle)\n }\n }\n\n componentDidMount(): void {\n const circle = new google.maps.Circle({\n ...(this.props.options || {}),\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: circle,\n })\n\n this.setState(function setCircle() {\n return {\n circle,\n }\n }, this.setCircleCallback)\n }\n\n componentDidUpdate(prevProps: CircleProps): void {\n if (this.state.circle !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.circle,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.circle !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.circle)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.circle && this.state.circle.setMap(null)\n }\n }\n\n render(): JSX.Element {\n return <>\n }\n}\n\nexport default Circle\n","import * as React from 'react'\n\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\n\nimport MapContext from '../../map-context'\n\nconst eventMap = {\n onAddFeature: 'addfeature',\n onClick: 'click',\n onDblClick: 'dblclick',\n onMouseDown: 'mousedown',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRemoveFeature: 'removefeature',\n onRemoveProperty: 'removeproperty',\n onRightClick: 'rightclick',\n onSetGeometry: 'setgeometry',\n onSetProperty: 'setproperty',\n}\n\nconst updaterMap = {\n add(\n instance: google.maps.Data,\n features: google.maps.Data.Feature | google.maps.Data.FeatureOptions\n ): void {\n instance.add(features)\n },\n addgeojson(\n instance: google.maps.Data,\n geojson: object,\n options?: google.maps.Data.GeoJsonOptions\n ): void {\n instance.addGeoJson(geojson, options)\n },\n contains(instance: google.maps.Data, feature: google.maps.Data.Feature): void {\n instance.contains(feature)\n },\n foreach(instance: google.maps.Data, callback: (feature: google.maps.Data.Feature) => void): void {\n instance.forEach(callback)\n },\n loadgeojson(\n instance: google.maps.Data,\n url: string,\n options: google.maps.Data.GeoJsonOptions,\n callback: (features: google.maps.Data.Feature[]) => void\n ): void {\n instance.loadGeoJson(url, options, callback)\n },\n overridestyle(\n instance: google.maps.Data,\n feature: google.maps.Data.Feature,\n style: google.maps.Data.StyleOptions\n ): void {\n instance.overrideStyle(feature, style)\n },\n remove(instance: google.maps.Data, feature: google.maps.Data.Feature): void {\n instance.remove(feature)\n },\n revertstyle(instance: google.maps.Data, feature: google.maps.Data.Feature): void {\n instance.revertStyle(feature)\n },\n controlposition(instance: google.maps.Data, controlPosition: google.maps.ControlPosition): void {\n instance.setControlPosition(controlPosition)\n },\n controls(instance: google.maps.Data, controls: google.maps.DrawingMode[] | null): void {\n instance.setControls(controls)\n },\n drawingmode(instance: google.maps.Data, mode: google.maps.DrawingMode): void {\n instance.setDrawingMode(mode)\n },\n map(instance: google.maps.Data, map: google.maps.Map): void {\n instance.setMap(map)\n },\n style(\n instance: google.maps.Data,\n style: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions\n ): void {\n instance.setStyle(style)\n },\n togeojson(instance: google.maps.Data, callback: (feature: object) => void): void {\n instance.toGeoJson(callback)\n },\n}\n\ninterface DataState {\n data: google.maps.Data | null\n}\nexport interface DataProps {\n options?: google.maps.Data.DataOptions\n /** This event is fired when a feature is added to the collection. */\n onAddFeature?: (e: google.maps.Data.AddFeatureEvent) => void\n /** This event is fired for a click on the geometry. */\n onClick?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired for a double click on the geometry. */\n onDblClick?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired for a mousedown on the geometry. */\n onMouseDown?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired when the mouse leaves the area of the geometry. */\n onMouseOut?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired when the mouse enters the area of the geometry. */\n onMouseOver?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired for a mouseup on the geometry. */\n onMouseUp?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired when a feature is removed from the collection. */\n onRemoveFeature?: (e: google.maps.Data.RemoveFeatureEvent) => void\n /** This event is fired when a feature's property is removed. */\n onRemoveProperty?: (e: google.maps.Data.RemovePropertyEvent) => void\n /** This event is fired for a rightclick on the geometry. */\n onRightClick?: (e: google.maps.Data.MouseEvent) => void\n /** This event is fired when a feature's geometry is set. */\n onSetGeometry?: (e: google.maps.Data.SetGeometryEvent) => void\n /** This event is fired when a feature's property is set. */\n onSetProperty?: (e: google.maps.Data.SetPropertyEvent) => void\n /** This callback is called when the data instance has loaded. It is called with the data instance. */\n onLoad?: (data: google.maps.Data) => void\n /** This callback is called when the component unmounts. It is called with the data instance. */\n onUnmount?: (data: google.maps.Data) => void\n}\n\nexport class Data extends React.PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: DataState = {\n data: null,\n }\n\n setDataCallback = (): void => {\n if (this.state.data !== null && this.props.onLoad) {\n this.props.onLoad(this.state.data)\n }\n }\n\n componentDidMount(): void {\n const data = new google.maps.Data({\n ...(this.props.options || {}),\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: data,\n })\n\n this.setState(function setData() {\n return {\n data,\n }\n }, this.setDataCallback)\n }\n\n componentDidUpdate(prevProps: DataProps): void {\n if (this.state.data !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.data,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.data !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.data)\n }\n\n unregisterEvents(this.registeredEvents)\n\n if (this.state.data) {\n this.state.data.setMap(null)\n }\n }\n }\n\n render(): null {\n return null\n }\n}\n\nexport default Data\n","import { PureComponent } from 'react'\n\nimport { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper'\nimport MapContext from '../../map-context'\n\nconst eventMap = {\n onClick: 'click',\n onDefaultViewportChanged: 'defaultviewport_changed',\n onStatusChanged: 'status_changed',\n}\n\nconst updaterMap = {\n options(instance: google.maps.KmlLayer, options: google.maps.KmlLayerOptions): void {\n instance.setOptions(options)\n },\n url(instance: google.maps.KmlLayer, url: string): void {\n instance.setUrl(url)\n },\n zIndex(instance: google.maps.KmlLayer, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\ninterface KmlLayerState {\n kmlLayer: google.maps.KmlLayer | null\n}\n\nexport interface KmlLayerProps {\n options?: google.maps.KmlLayerOptions\n /** The URL of the KML document to display. */\n url?: string\n /** The z-index of the layer. */\n zIndex?: number\n /** This event is fired when a feature in the layer is clicked. */\n onClick?: (e: google.maps.MouseEvent) => void\n /** This event is fired when the KML layers default viewport has changed. */\n onDefaultViewportChanged?: () => void\n /** This event is fired when the KML layer has finished loading. At this point it is safe to read the status property to determine if the layer loaded successfully. */\n onStatusChanged?: () => void\n /** This callback is called when the kmlLayer instance has loaded. It is called with the kmlLayer instance. */\n onLoad: (kmlLayer: google.maps.KmlLayer) => void\n /** This callback is called when the component unmounts. It is called with the kmlLayer instance. */\n onUnmount: (kmlLayer: google.maps.KmlLayer) => void\n}\n\nexport class KmlLayer extends PureComponent {\n static contextType = MapContext\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n state: KmlLayerState = {\n kmlLayer: null,\n }\n\n setKmlLayerCallback = (): void => {\n if (this.state.kmlLayer !== null && this.props.onLoad) {\n this.props.onLoad(this.state.kmlLayer)\n }\n }\n\n componentDidMount(): void {\n const kmlLayer = new google.maps.KmlLayer({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: kmlLayer,\n })\n\n this.setState(function setLmlLayer() {\n return {\n kmlLayer,\n }\n }, this.setKmlLayerCallback)\n }\n\n componentDidUpdate(prevProps: KmlLayerProps): void {\n if (this.state.kmlLayer !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.kmlLayer,\n })\n }\n }\n\n componentWillUnmount(): void {\n if (this.state.kmlLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.kmlLayer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.kmlLayer.setMap(null)\n }\n }\n\n render(): React.ReactNode {\n return null\n }\n}\n\nexport default KmlLayer\n","import { PositionDrawProps } from \"../../types\"\n\n/* eslint-disable filenames/match-regex */\nexport function getOffsetOverride(\n containerElement: HTMLElement,\n getPixelPositionOffset?: (offsetWidth: number, offsetHeight: number) => { x: number; y: number }\n): { x: number; y: number } | {} {\n return typeof getPixelPositionOffset === 'function'\n ? getPixelPositionOffset(containerElement.offsetWidth, containerElement.offsetHeight)\n : {}\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst createLatLng = (inst: any, Type: any): any => new Type(inst.lat, inst.lng)\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst createLatLngBounds = (inst: any, Type: any): any =>\n new Type(\n new google.maps.LatLng(inst.ne.lat, inst.ne.lng),\n new google.maps.LatLng(inst.sw.lat, inst.sw.lng)\n )\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ensureOfType = (inst: any, type: any, factory: any): any => {\n return inst instanceof type ? inst : factory(inst, type)\n}\n\nconst getLayoutStylesByBounds = (\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n bounds: google.maps.LatLngBounds\n): { left: string; top: string; width?: string; height?: string } => {\n const ne = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(bounds.getNorthEast())\n\n const sw = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(bounds.getSouthWest())\n\n if (ne && sw) {\n return {\n left: `${sw.x + offset.x}px`,\n top: `${ne.y + offset.y}px`,\n width: `${ne.x - sw.x - offset.x}px`,\n height: `${sw.y - ne.y - offset.y}px`,\n }\n }\n\n return {\n left: '-9999px',\n top: '-9999px',\n }\n}\n\nconst getLayoutStylesByPosition = (\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n position: google.maps.LatLng\n): { left: string; top: string } => {\n const point = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(position)\n\n if (point) {\n const { x, y } = point\n\n return {\n left: `${x + offset.x}px`,\n top: `${y + offset.y}px`,\n }\n }\n\n return {\n left: '-9999px',\n top: '-9999px',\n }\n}\n\nexport const getLayoutStyles = (\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral,\n position?: google.maps.LatLng | google.maps.LatLngLiteral\n): PositionDrawProps => {\n return bounds !== undefined\n ? getLayoutStylesByBounds(\n mapCanvasProjection,\n offset,\n ensureOfType(bounds, google.maps.LatLngBounds, createLatLngBounds)\n )\n : getLayoutStylesByPosition(\n mapCanvasProjection,\n offset,\n ensureOfType(position, google.maps.LatLng, createLatLng)\n )\n}\n\nexport const arePositionsEqual = (\n currentPosition: PositionDrawProps,\n previousPosition: PositionDrawProps\n): boolean => {\n return currentPosition.left === previousPosition.left\n && currentPosition.top === previousPosition.top\n && currentPosition.width === previousPosition.height\n && currentPosition.height === previousPosition.height;\n}","import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport invariant from 'invariant'\n\nimport MapContext from '../../map-context'\n\nimport { getOffsetOverride, getLayoutStyles, arePositionsEqual } from './dom-helper'\n\ninterface OverlayViewState {\n paneEl: Element | null\n containerStyle: React.CSSProperties\n}\n\nfunction convertToLatLngString(latLngLike?: google.maps.LatLng | google.maps.LatLngLiteral | null) {\n if (!latLngLike) {\n return ''\n }\n\n const latLng = latLngLike instanceof google.maps.LatLng\n ? latLngLike\n : new google.maps.LatLng(latLngLike.lat, latLngLike.lng)\n\n return latLng + ''\n}\n\nfunction convertToLatLngBoundsString(latLngBoundsLike?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral | null) {\n if (!latLngBoundsLike) {\n return ''\n }\n\n const latLngBounds = latLngBoundsLike instanceof google.maps.LatLngBounds\n ? latLngBoundsLike\n : new google.maps.LatLngBounds(\n new google.maps.LatLng(latLngBoundsLike.south, latLngBoundsLike.east),\n new google.maps.LatLng(latLngBoundsLike.north, latLngBoundsLike.west)\n )\n\n return latLngBounds + ''\n}\n\nexport type PaneNames = keyof google.maps.MapPanes\nexport interface OverlayViewProps {\n // required\n mapPaneName: PaneNames\n getPixelPositionOffset?: (offsetWidth: number, offsetHeight: number) => { x: number; y: number }\n bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n position?: google.maps.LatLng | google.maps.LatLngLiteral\n onLoad?: (overlayView: google.maps.OverlayView) => void\n onUnmount?: (overlayView: google.maps.OverlayView) => void\n}\n\nexport class OverlayView extends React.PureComponent {\n static FLOAT_PANE: PaneNames = `floatPane`\n static MAP_PANE: PaneNames = `mapPane`\n static MARKER_LAYER: PaneNames = `markerLayer`\n static OVERLAY_LAYER: PaneNames = `overlayLayer`\n static OVERLAY_MOUSE_TARGET: PaneNames = `overlayMouseTarget`\n\n static contextType = MapContext\n\n state: OverlayViewState = {\n paneEl: null,\n containerStyle: {\n // set initial position\n position: 'absolute'\n },\n }\n\n overlayView: google.maps.OverlayView\n containerRef: React.RefObject