Closed lkuich closed 1 year ago
Currently there isn't a functional version of GroundOverlay. I've made something small for the interm for my needs, but having a fully featured component would be awesome!
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(() => { return new google.maps.GroundOverlay(url, imageBounds, options); }, []); 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);
os: mac
node --version
react version: 18.1.0
webpack version: 5.74.0
@babel version: 7.20.2
@react-google-maps/api version: 2.17.1
No component exists.
A functional component for modern React should exist.
Your PR is welcome.
Thanks, I just opened a PR here: https://github.com/JustFly1984/react-google-maps-api/pull/3175
Please provide an explanation of the issue
Currently there isn't a functional version of GroundOverlay. I've made something small for the interm for my needs, but having a fully featured component would be awesome!
Your Environment
os: mac
node --version
react version: 18.1.0
webpack version: 5.74.0
@babel version: 7.20.2
@react-google-maps/api version: 2.17.1
How does it behave?
No component exists.
How should it behave correctly?
A functional component for modern React should exist.
Basic implementation of incorrect behavior in codesandbox.com