why fitBounds needed?

[ebadta81]

It shows me only a grey rectangle, if I don't call fitBounds(). I have center and zoom in GoogleMap props. Why is it not enough?

Also it totally ignores setZoom. Only the rectangle matters, I set in fitBounds.

This way I need to manually compute nw se coords. This is unconfortable, and wrong.

I tried without calling onLoad too.

        const onLoad = useCallback(function callback(map: google.maps.Map) {
            //const bounds = new window.google.maps.LatLngBounds(point ? point : {lat: 47.2023061, lng: 19.5568265});
            let bounds: google.maps.LatLngBounds;
            if (lat && lng)
            {
                bounds = new window.google.maps.LatLngBounds({lat: lat+0.250, lng: lng-0.250}, {lat: lat-0.250, lng: lng+0.250});
            } else {
                bounds = new window.google.maps.LatLngBounds({lat: 47.2981259, lng: 19.8135549}, {lat: 47.3847619, lng: 20.8114312});
            }

            map.fitBounds(bounds)
            zoom !== undefined && map.setZoom(zoom)
            setMap(map)
        }, [])

        const onUnmount = useCallback(function callback(map: google.maps.Map) {
            setMap(null)
        }, [])

        return isLoaded ? (
            <GoogleMap
            mapContainerStyle={containerStyle}
            center={point}
            zoom={zoom}
            onLoad={onLoad}
            onUnmount={onUnmount}
            onClick={mapClick}
            >
            {lat && lng && <Marker position={{ lat: lat, lng: lng }} title={address ? address : p.text} />}
            </GoogleMap>
        ) : <><div>Google Map</div></>

Your Environment

os: mac

node --version v16.15.1

react version 18.2.0

@react-google-maps/api version 2.13.1

[ckalas]

fwiw I was wondering this too, and i dont need to call it if i do a panTo and setZoom when the map is loaded

[JustFly1984]

This is just an example of using onLoad prop. It is not required at all!

[ebadta81]

This is just an example of using onLoad prop. It is not required at all!

Yes, but there is a center and zoom property in the GoogleMap object, which do nothing.

I assumed, they do something, but if I don't use onLoad with fitBounds, I see a grey rectangle.

[ebadta81]

fwiw I was wondering this too, and i dont need to call it if i do a panTo and setZoom when the map is loaded

I tried with panTo, setZoom and it is very strange. I use GoogleMap in a Mui dialog box, and for the first time I open it, it shows the map, but if i close and open it again, it shows me grey rectangle.

this is my modified onLoad code:

        const onLoad = useCallback(function callback(map: google.maps.Map) {
            if (lat && lng) {
                console.log(`lat: ${lat} lng: ${lng}`)
                map.panTo({lat: lat, lng: lng})
            }
            if (zoom) {
                console.log(`zoom: ${zoom}`)
                map.setZoom(zoom)
            }
            setMap(map)
        }, [])

Every time, I open the dialog, I see the lat, lng and zoom text on the console, and no error message appears.

For test purposes, I put the fitBounds before the panTo, setZoom. In this case the map appears every time. :)

So this is a workaround for me.

[Alynva]

This is just an example of using onLoad prop. It is not required at all!

This was causing my map to go to the ocean even if I call setCenter right after/before the fitBounds