Merge pull request #3175 from lkuich/ground-overlay-develop

Author: JustFly1984

packages/react-google-maps-api/src/components/overlays/GroundOverlay.tsx

@@ -1,4 +1,4 @@
-import { type ContextType, PureComponent } from 'react'
+import { type ContextType, PureComponent, memo, useMemo, useEffect, useContext } from 'react'
 
 import invariant from 'invariant'
 
@@ -27,9 +27,9 @@ export interface GroundOverlayProps {
   /** The opacity of the overlay, expressed as a number between 0 and 1. Optional. Defaults to 1. */
   opacity?: number | undefined
   /** This event is fired when the DOM dblclick event is fired on the GroundOverlay. */
-  onDblClick?: ((e: google.maps.MapMouseEvent) => void)  | undefined
+  onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined
   /** This event is fired when the DOM click event is fired on the GroundOverlay. */
-  onClick?: ((e: google.maps.MapMouseEvent) => void)  | undefined
+  onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined
   /** The url of the projected image */
   url: string
   /** The bounds that the image will be scaled to fit */
@@ -38,8 +38,60 @@ export interface GroundOverlayProps {
   onLoad?: ((groundOverlay: google.maps.GroundOverlay) => void) | undefined
   /** This callback is called when the component unmounts. It is called with the groundOverlay instance. */
   onUnmount?: ((groundOverlay: google.maps.GroundOverlay) => void) | undefined
+  visible?: boolean
 }
 
+function GroundOverlayFunctional({ url, bounds, options, visible }: GroundOverlayProps) {
+  const map = useContext<google.maps.Map | null>(MapContext)
+
+  const imageBounds = new google.maps.LatLngBounds(
+    new google.maps.LatLng(bounds.south, bounds.west),
+    new google.maps.LatLng(bounds.north, bounds.east)
+  );
+
+  const groundOverlay = useMemo(() => {
+    const overlay = new google.maps.GroundOverlay(url, imageBounds, {
+      ...options
+    });
+    return overlay
+  }, []);
+
+  useEffect(() => {
+    if (groundOverlay !== null) {
+      groundOverlay.setMap(map);
+    }
+  }, [map])
+
+  useEffect(() => {
+    if (typeof url !== 'undefined' && groundOverlay !== null) {
+      groundOverlay.set("url", url);
+      groundOverlay.setMap(map);
+    }
+  }, [groundOverlay, url]);
+
+  useEffect(() => {
+    if (typeof visible !== 'undefined' && groundOverlay !== null) {
+      groundOverlay.setOpacity(visible ? 1 : 0);
+    }
+  }, [groundOverlay, visible]);
+
+  useEffect(() => {
+    const newBounds = new google.maps.LatLngBounds(
+      new google.maps.LatLng(bounds.south, bounds.west),
+      new google.maps.LatLng(bounds.north, bounds.east)
+    );
+
+    if (typeof bounds !== 'undefined' && groundOverlay !== null) {
+      groundOverlay.set("bounds", newBounds);
+      groundOverlay.setMap(map);
+    }
+  }, [groundOverlay, bounds])
+
+  return null;
+}
+
+export const GroundOverlayF = memo(GroundOverlayFunctional);
+
 export class GroundOverlay extends PureComponent<GroundOverlayProps, GroundOverlayState> {
   public static defaultProps = {
     onLoad: noop,

packages/react-google-maps-api/src/index.ts

@@ -112,6 +112,7 @@ export {
 
 export {
   default as GroundOverlay,
+  GroundOverlayF,
   type GroundOverlayProps,
 } from './components/overlays/GroundOverlay'