[Next.js] google maps 사용

상황

서버에서 받은 장소를 화면에 나열하고, 장소를 클릭했을 때 그 장소의 위치를 google maps를 통해 보고 싶었다.

구현

1. google cloud console에 가서 새 project를 만든다.
2. API 및 서비스 탭의 사용자 인증 정보 화면에서 사용자 인증 정보 만들기를 클릭하여 API키를 만든다.
   
3. 라이브러리 탭에 들어가서 Maps JavaScript API를 찾아 ENABLE 또는 사용 버튼을 누른다. 관리버튼으로 되어 있으면 이미 사용중인 상태이다.
   
4. @googlemaps/js-api-loader package 설치

npm i @googlemaps/js-api-loader

이 패키지를 사용하면 Google Maps JavaScript API를 비동기적으로 로드하여 앱에서 사용할 수 있다. 공식문서

5. 코드
   Google maps 컴포넌트로 string type의 address를 props로 보내면, 이 값을 기준으로 results 배열의 location에 위도와 경도가 담긴다.
   받아온 위도와 경도를 기준으로 Map의 중앙값이 정해지고, 그 위치에 marker가 그려진다.

import React, { useEffect, useMemo, useRef } from 'react'

import { Loader } from "@googlemaps/js-api-loader";

const GoogleMap = ({ address }: { address: string }) => {
    const mapRef = useRef<HTMLDivElement>(null);
    const geocoder = useMemo(() => new google.maps.Geocoder(), []);
    useEffect(() => {
        const loader = new Loader({
            apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string,
            version: "weekly",
        });
        loader.load().then(() => {
            geocoder.geocode({ address: address }, (results, status) => {
                if (results) {
                    if (status === "OK") {
                        const map = new google.maps.Map(mapRef.current as HTMLDivElement, {
                            center: results[0].geometry.location,
                            zoom: 13,
                        });
                        const marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                        });
                    } else {
                        console.error(`Geocode was not successful for the following reason: ${status}`);
                    }
                }
            });
        });
    }, [address, geocoder]);
    return <div className='min-h-[20rem] border border-gray-400 p-2 rounded' ref={mapRef} />;
}


export default GoogleMap

결과

참고자료

How to Embed Google Maps on your Next.js App in 3 Steps

프로젝트 자세히 보기

프론트엔드 코드 깃헙