جاوااسکریپت - React Google Maps Api بزرگنمایی حداکثر در هر بار تازهسازی

من در تلاش هستم تا API گوگل مپس را در پروژه خود پیادهسازی کنم و از مستندات بسته NPM دنبال میکنم: https://www.npmjs.com/package/@react-google-maps/api

این زمانی کار میکند که من سعی میکنم کامپوننت گوگل مپ خود را فراخوانی کنم، اما در هر بار تازهسازی نقشه من با بیشترین سطح زوم باز میشود حتی با اینکه میزان زوم به درستی به نقشه منتقل شده است.

وقتی که دارم map را در کنسول log میکنم، میگوید که زوم روی ۲۲ تنظیم شده است..

آیا ایدهای داری که ممکن است از کجا باشد؟

خیلی ممنون!

:)

این کد است

import React from 'react'
import { GoogleMap, useJsApiLoader, Marker } from '@react-google-maps/api';

export interface Props {
    location: {
        lat: number,
        lng: number
    },
    //zoom: number,
}

const containerStyle = {
  width: '600px',
  height: '400px'
};

const GoogleMapComponent: React.FC<Props> = ({
 location,
// zoom = 12,
}: Props) => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.GOOGLE_MAP_API_KEY
  })

  const [map, setMap] = React.useState(null)
  console.log(location)

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(location);
    map.fitBounds(bounds);
    setMap(map)
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  return isLoaded ? (
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={location}
        onLoad={onLoad}
        onUnmount={onUnmount}
        zoom={12}
      >
        { /* Child components, such as markers, info windows, etc. */ }
        {/* <Marker position={location}/> */}
      </GoogleMap>
  ) : <></>
}

export default React.memo(GoogleMapComponent)

import React, { ReactElement, useState, useEffect, useMemo } from "react";
import { IPark } from "../../../types/park";
import parkService from "../../../services/Parks/park-service";
import { CContainer, CRow, CCol  } from '@coreui/react';
import GoogleMap from "../../../components/Map/GoogleMap";

const DashboardPark = (props: any): ReactElement => {
  
  const [park, setPark]: [any, (park: IPark) => void] =
    useState();
  const [isLoading, setIsLoading]: [boolean, (loading: boolean) => void] =
    useState<boolean>(true);
  const [isError, setIsError]: [string, (error: string) => void] = useState("");
  useEffect(() => {
    parkService.getPark(props.match.params.id).
      then((response) => {
        console.log(response)
        setPark(response.data);
        setIsLoading(false);
      })
      .catch((ex) => {
        console.log(ex.response)
        const error =
          ex.code === "ECONNABORTED"
            ? "A timeout has occurred"
            : ex.response.data
        setIsError(error);
        setIsLoading(false);
      });
  }, []);

  return (
    <CContainer>
      <CRow>
        <h2>List</h2>
      </CRow>
      <CRow>
        {isLoading ? (
          <p>Loading</p>
        ) : (
          <div>
            {/* <GoogleMap location={{lat: park.location[0],lng: park.location[1]}}/> */}
          </div>
          
        )}
        {isError ? (
          <p>{isError}</p>
        ) : ''}
      </CRow>
      <CRow>
        
      </CRow>
    </CContainer>
  );
};

export default DashboardPark;

پاسخ شماره ۱

من فهمیدم که این از کجا میآید

const bounds = new window.google.maps.LatLngBounds(location);
map.fitBounds(bounds);

پس من به سادگی آن را با جایگزین کردم

map.setZoom(zoom)

پاسخ شماره ۲

اینجا هم با همان مشکل در یک API مواجه هستم، این راهحل موقت را در گیتهاب پیدا کردم:

const OPTIONS = {
  minZoom: 4,
  maxZoom: 18,
}

....
render() { 
....
<GoogleMap
   options = {OPTIONS}
...
};