React Google Maps Api Zoom to max on each refresh

Question

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 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;

Answer 1

I found out it was coming from

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

So i simply replaced it with

map.setZoom(zoom)

Answer 2

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}
    ...
  >
  ...
 )

Answer 3

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

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

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