React Google Maps Api Zoom to max on each refresh-CodePudding

I'm trying to implement Google Maps Api in my project and i'm following the documentation from the NPM bundle : https://www.npmjs.com/package/@react-google-maps/api

This works when i'm trying to call my Google Map Component, But on each refresh my map is zoomed at the max level even with the zoom properly passed to the map.

When i'm console.logging(map) it says the zoom is set at 22..

Do you have any ideas from where it might be from ?

Thanks a lot!

Here's the code

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 onl oad = 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}
        onl oad={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;

CodePudding user response：

Facing same problem here with an API, I found this temporary solution on GitHub:

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

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

CodePudding user response：

I have a temporary solution, but I don't like it very much.

The init and end value must be different.

const [zoom, setZoom] = useState(14)
 
...
 
useEffect(() => {
  setTimeout(() => {
      setZoom(15)
  }, 300);
}, [])
    
 return (
  ...
  <GoogleMap
    zoom={zoom}
    ...
  >
  ...
 )