使用 google-map-react fitbounds useRef -> mapRef.current.fitBounds 不是函数

Question

. Answers to this question are eligible for a +50 reputation bounty. Lucas Bodin wants to to this question.

I use google-map-react and I want to have the correct zoom and center to the map. To center the map I use the props center on GoogleMapReact component that I can calculate. But for the zoom it is more complex.

I could see the use of fitBounds but that is not available on "google-map-react"

Is there a way to calculate the zoom so that it contains the markers that I have defined. Or a function that does it by itself like fitbounds ?

Be careful not to confuse " google-map-react " (used here) with "react-google-map" (not used)

import GoogleMapReact from "google-map-react";
import {Place} from "@material-ui/icons";
import {useRef} from "react";


const Page = () => {

    const mapRef = useRef(null);

    const MarkerPlace = (props) => {
        return (
            <div>
                <Place fontSize={"large"}></Place>
                <p>{props.name}</p>
            </div>
        )
    }

    const FitBounds = () => {
        let bounds = new google.maps.LatLngBounds();
        let lat = 38.103;
        let lng = -121.572;
        bounds.extend(new google.maps.LatLng(lat, lng));

        console.log(mapRef.current) //o {props: {…}, context: {…}, refs: {…}, updater: {…}, _getMinZoom: ƒ, …}

        //The error occurs at the line below
        mapRef.current.fitBounds(bounds) //TypeError: mapRef.current.fitBounds is not a function
        //The error occurs at the line above
    }

    return (
        <div>
            <GoogleMapReact ref={mapRef} bootstrapURLKeys={{key: ""}} center={defaultCenter} defaultZoom={13}
                {view === "recherche" && currentSearchData.map((activity, index) => (
                    <MarkerPlace key={index} lat={activity.latitude} lng={activity.longitude} name={activity.name}/>
                 ))}
            </GoogleMapReact>
            <button onclick={FitBounds}>FitBounds</button>
        </div>
    )
}

export default Page;

Answer 1

fitBounds does exist in google-map-react , but it's a separate utility function rather than a function on the instance. There are examples of how to use it in the api . According to the source code , fitBounds is defined to take corner boundaries as the first parameter, and a height/width dictionary as the second:

export function fitBounds({ nw, se, ne, sw }, { width, height }) {

and it returns a new object with newBounds , presumably to be destructured and used to set the new center and zoom .