[React] Google Map default zoom 바로 안 먹힘

문제 상황

처음 페이지가 렌더될 때는 내가 명시해 준 zoom level을 무시하고 최대 줌이 땡겨졌다.

한 번 더 렌더를 해주면 그때서야 명시해 준 알맞은 zoom level로 지도가 로딩되었다.

 

문제가 있던 코드

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

const DrawMap = () => {
	// API 키
    const { isLoaded } = useJsApiLoader({
    	id: "google-map-script",
    	googleMapsApiKey: process.env.REACT_APP_GOOGLEMAP_API_KEY,
  	});
    
    // 지도 크기
    const containerStyle = {
    	width: "80%",
    	height: "30rem",
  	};
    
    // 지도 중심
    const center = {
    	lat: 20.466,
    	lng: -70.268,
  	};
    
    // 지도 불러오기
    const [map, setMap] = useState(null);

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

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

	return(
    	<>
        {isLoaded ? (
                  <>
                    <GoogleMap
                      mapContainerStyle={containerStyle}
                      center={center}
                      onLoad={onLoad}
                      onUnmount={onUnmount}
                      zoom={13}
                    ></GoogleMap>
                  </>
                ) : null}
        </>
    )


}

---

문제 원인

지도 불러오기 부분의 onLoad() 함수 내에서 사용하고 있던 google.maps.LatLngBounds() 함수가 지도의 중심과 줌 레벨을 리셋시키는 기능이 있다.

 

해결 방법

onLoad() 함수 내의 map.fitBounds를 제거해주면 된다.

 

수정한 코드

...
    
    // 지도 불러오기
    const [map, setMap] = useState(null);

 	const onLoad = useCallback(function callback(map) {
    	const bounds = new window.google.maps.LatLngBounds(center);

    	setMap(bounds);
  	}, []);

...

---

참고 문헌

https://www.reddit.com/r/reactjs/comments/vaq8kp/google_maps_api_is_loading_at_max_zoom/

r/reactjs on Reddit: Google Maps API is loading at max zoom