[ React ] react-google-maps/api 사용하기

react에서 google maps api를 사용하는 방법입니다.

 

먼저 구글 클라우드에서 프로젝트를 생성해줍니다.

구글 클라우드 바로가기

 

구글 클라우드에서 새 프로젝트를 생성해줍니다.

 

프로젝트 이름을 작성해주고 만들기를 눌러줍니다.

 

왼쪽 상단에 리스트에서 API 및 서비스 -> 라이브러리로 이동합니다.

 

Maps SDK for Android, Maps SDK for iOS, Maps Javascript API에서 사용을 해줍니다. ( 저는 웹 사이트에서만 보여주려 했기 때문에 Maps Javascript API만 체크해주었습니다. )

 

세부정보로 들어가서 아래처럼 사용을 클릭해줍니다.

 

사용을 클릭해주고 난 뒤에 이번엔 API 및 서비스 -> 사용자 인증 정보로 갑니다.

 

사용자 인증 정보 만들기를 눌러서 API 키를 생성해줍니다.

 

생성하면 아래처럼 API 키가 나옵니다.  ( 키는 기억해줍니다. )

 

생성한 API키로 들어갑니다.

 

아래에 체크된 부분을 설정해줍니다.

 

여기까지가 API 설정 부분이었고, 이제부터 React 프로젝트를 열어줍니다.

 

npm

npm i @react-google-maps/api

 

.tsx

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

const containerStyle = {
    width: '1000px',
    height: '1000px'
};

const center = {
    lat: 37.5400456, lng: 126.9921017
};

const Meteorological = () => {
    const { isLoaded } = useJsApiLoader({
        id: process.env.REACT_APP_GOOGLE_API_ID,
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY as string
    })
    
    const [map, setMap] = React.useState(null)

    const onLoad = React.useCallback(function callback(map: any) {
        // This is just an example of getting and using the map instance!!! don't just blindly copy!
        const bounds = new window.google.maps.LatLngBounds(center);
        map.fitBounds(bounds);
    
        setMap(map)
    }, [])
    
    const onUnmount = React.useCallback(function callback(map: any) {
        setMap(null)
    }, [])
    
    return isLoaded ? (
        <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
            onLoad={onLoad}
            onUnmount={onUnmount}
        >
            { /* Child components, such as markers, info windows, etc. */ }
            <MarkerF position={center} />
            <></>
        </GoogleMap>
    ) : <></>
}

export default Meteorological;

위 내용은 npm에서 가져온 내용입니다.

다른점은 구글 지도위에 마커를 찍기 위해서는 <Marker />를 사용했었는데 react 18버전부터는 <MarkerF />를 써야한다는 정도만 다른것 같습니다.