We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
os: mac
node --version: v21.1.0
react version: 18.2.0
nextjs version: 13.5.4
@react-google-maps/api version: 2.19.2
I'm using NextJs, the useJsApiLoader is working just fine except if I use the browser's back & next button to navigate between 2 pages.
Steps to reproduce the error
Remarks
Here is some what my component looks like:
const OurLocationMapView = ({ lng }: OurLocationMapViewProps) => { const [map, setMap] = useAtom(mapAtom); const [, setMapWrapper] = useAtom(mapWrapperAtom); const [maxZoom, setMaxZoom] = React.useState(15); const [center] = React.useState({ lat: 22.308, lng: 114.178, }); const { t } = useTranslation(lng, 'navbar'); const { isLoaded, loadError } = useLoadScript({ id: 'google-map-script', googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string, language: lng, }); const [stores] = useAtom(storesAtom); const [selectedStore, setSelectedStore] = useAtom(selectedStoreAtom); const onLoad = React.useCallback(function callback(map: any) { const bounds = new window.google.maps.LatLngBounds(center); map.fitBounds(bounds); setMap(map); if (timer) clearTimeout(timer); timer = setTimeout(() => { setMaxZoom(20); }, 1000); }, []); const onUnmount = React.useCallback(function callback(map: any) { setMap(null); if (timer) clearTimeout(timer); }, []); if (!isLoaded || loadError) return null; return ( <div id={'store-location-map'} ref={(ref) => setMapWrapper(ref)} className={'sticky top-0 h-[65svh] w-full xl:h-[100svh]'} > <GoogleMap mapContainerStyle={containerStyle} center={center} onLoad={onLoad} onUnmount={onUnmount} options={{ styles: [...styleArray], clickableIcons: false, mapTypeControl: false, maxZoom, }} > {/* some markers & infowindow */} </div> ) }
I have tried removing the setters inside the onLoad handler, but the error still persist.
The error should not occur if using browser back & forward button.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Your Environment
os: mac
node --version: v21.1.0
react version: 18.2.0
nextjs version: 13.5.4
@react-google-maps/api version: 2.19.2
How does it behave?
I'm using NextJs, the useJsApiLoader is working just fine except if I use the browser's back & next button to navigate between 2 pages.
Steps to reproduce the error
Remarks
Here is some what my component looks like:
I have tried removing the setters inside the onLoad handler, but the error still persist.
How should it behave correctly?
The error should not occur if using browser back & forward button.
The text was updated successfully, but these errors were encountered: