구글맵(Google Maps) 사용기 in Next.js

라이브러리를 따로 사용하지 않고, Nextjs 환경에서 구글맵을 사용한 후기를 짧게나마 정리하려고 한다.
이때, 필요한 페이지에서만 script를 다운받고 쓰지 않을때는 해당 script가 사라졌으면 했다.

그래서, 애초에 app.tsx / document.tsx 에 넣지않았고 쓰이는 페이지의 컴포넌트에서 script를 삽입하였다.

const Acomponent = () => {
  const { lat, lon } = playdatesData ?? { lat: 0, lon: 0 };
  const { mapRef } = useGoogleMap({ lat, lng: lon });

  return (
    <Box>
      <TitleP>{'Location'}</TitleP>
      <LocationP>{getLocation(playdatesData?.locationInfo?.address ?? '')}</LocationP>
      <div style={{ width: '100%', height: '200px' }} ref={mapRef} />
    </Box>
  );
};

처음에는 해당 컴포넌트에서 모든 로직을 짜서 넣었지만, 따로 분리해서 custom hook으로 관리하는 게 좋을 거 같아서 분리하였다.
다른 화면에서도 쓰일 수 있기 때문이다.

import { useCallback, useEffect, useRef } from 'react';

interface MapProps {
  lat: number;
  lng: number;
}

const useGoogleMap = ({ lat, lng }: MapProps) => {
  const mapRef = useRef(null);

  const initMap = useCallback(() => {
    if (!mapRef?.current) return;

    if (lat && lng) {
      const { maps } = window.google;
      const position = { lat: lat, lng: lng };
      const map = new maps.Map(mapRef.current, {
        center: position,
        zoom: 15,
      });
      new maps.Marker({
        position: position,
        map: map,
      });
    }
  }, [lat, lng, mapRef]);

  useEffect(() => {
    // 없을 경우에 script를 삽입한다. 
    if (!window.google) {
      const script = document.createElement('script');
      script.setAttribute(
        'src',
        `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}`,
      );
      document.head.appendChild(script);

      script.onload = () => initMap();
    } else {
      initMap && initMap();
    }
  }, []);

  return { mapRef };
};

export default useGoogleMap;

useRef로 위치를 잡아주고 해당 위치에 Google Map을 가리킨 후 넣어주면 끝이다!
추가적인 옵션들은 따로 설정하지 않았다.

참고자료

• https://www.elharony.com/initmap-is-not-a-function/