Open benito7suriano opened 2 years ago
Have you been able to fix this issue yet ?
Where can I see the implementation?
const [zoomReset, setZoomReset] = useState(0) const [map, setMap] = React.useState(null) const onLoad = React.useCallback(function callback(map:any) { const bounds = new window.google.maps.LatLngBounds(center); map.fitBounds(bounds); setMap(map) setTimeout(() => setZoomReset(9), 1000) }, [])
use the setTimeout() to change the zoom level as default it wil be max and then u paste the zoomReset State to the google map component zoom property will be work
+1 to this issue. Also affecting our build. Any fix would be greatly appreciated. currently using this as a workaround, which works most of the time
useEffect(() => {
setTimeout(() => {
setZoom(10)
}, 100)
}, [])
@codyscott1 are you using the fitBounds method? If so, it sets the map viewport to contain the bounds you pass into that function, in turn taking precedence over the zoom property you may have added when creating the map instance.
Just remove
const bounds = new window.google.maps.LatLngBounds(center);
map.fitBounds(bounds);
and you should be fine
This is copy pasted from the example - it drove me nuts too - I removed it and 🥳
Issue template
Please provide an explanation of the issue
The
GoogleMap
component is not initially rendering to the provided 'zoom' prop. In my case, it is zoomed in much further than I want it to. After the initial render, if I modify the 'zoom' prop, say from 8 to 9, the component then renders the map at a zoom of 9.Your Environment
os: mac
node --version 18.9.0
react version 18.2.0
webpack version 3.8.1
@babel version 7.19.0
@react-google-maps/api version 2.13.1
How does it behave?
When I render the map for the first time, it's zoomed in excessively. If I go ahead and change the zoom prop after initial render, then the map gets rendered to the updated zoom level.
How should it behave correctly?
The map should render to the assigned 'zoom' prop from the very beginning.
Basic implementation of incorrect behavior in codesandbox.com