React/Next구글맵Api 사용하는 법

https://developers.google.com/maps?hl=ko 

Google Maps Platform  |  Google Developers

 

먼저 위의 링크로 들어가서 시작하기를 누른다

처음 방문했다면 각종 약관 동의가 나올 수 도있는데 동의하고 넘어간다.

 

오른쪽 카테고리에서 API를 누른다

카드를 인증하여 넘어간다,

카드를 추가한다고 바로 돈이 나가는 것이 아닌 매월 28,000회의 호출범위 안에서 무료로 사용할 수 있다고 한다, 이외에도 설정으로 통해 과금 범위가 다가오면 알람이나 한도를 설정하여 요금이 청구되지 않게 할 수 있다.

위 사진 처럼 사용자 인증 정보로 들어가서 Maps API Key를 클릭한다.

 

그러면 이름 오른쪽에 API key라고 나와 있을텐데 따로 메모장에 복사해두고.

.env 파일을 만들어서 보관해두자 아래에서는  NEXT_PUBLIC_GOOGLE_API_KEY라는 env 명을 통해 불러왔다.

npm i @react-google-maps/api
npm i react-geocode
위의 두개의 라이브러리를 설치해주자

@react-google-maps/api

 

react-geocode

 

그 후 아래와 같이 Map 커스텀 컴포넌트를 만들거나 컴포넌트안에 바로 주입해서 사용할 수 있다.

 

아래의  react-google-maps/api 라이브러리를 통해 가져오 GoogleMap, LoadScript, MarkerF 컴포넌트를 통해

props값만 넣어주면 바로 googlemap을 사용할 수 있다.

 

import { GoogleMap, LoadScriptNext, MarkerF } from "@react-google-maps/api";
import React, { useMemo, useEffect, useState } from "react";
import styled from "styled-components";
import GeoCode from "@/lib/Google-geocode";

const Wrapper = styled.div`
  .map-container {
    width: 100%;
    height: 540px;
  }
`;

const Map = ({ address }: any) => {
  const [location, setLocation] = useState({ lat: 0, lng: 0 });

  useEffect(() => {
    GeoCode(address).then((res) => {
      setLocation({
        lat: res?.lat,
        lng: res?.lng,
      });
    });
  }, [address]);

  const defaultCenter: any = {
    lat: location ? location.lat : 0.0,
    lng: location ? location.lng : 0.0,
  };
  const defaultZoom = 16;

  return (
    <Wrapper>
      <LoadScriptNext
        googleMapsApiKey={`${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`}
      >
        <GoogleMap
          clickableIcons={true}
          zoom={defaultZoom}
          center={defaultCenter}
          mapContainerClassName="map-container"
        >
          <MarkerF position={defaultCenter} />
        </GoogleMap>
      </LoadScriptNext>
    </Wrapper>
  );
};

export default Map;

 

Geocode를 사용하지 않으면 { lat :  , lng:  } 처럼 좌표를 담아놓은 객체를 바로 GoogleMap의 center props로 넣어주면 되는데

Geocode는 문자열로 입력한 주소를 ( 예 : 서울시청 ) 입력하면 좌표코드로 반환해준다

import Geocode from "react-geocode";

Geocode.setApiKey(process.env.NEXT_PUBLIC_GOOGLE_API_KEY || "");
Geocode.setLanguage("en");
Geocode.enableDebug();

const GeoCode = async (currentAddr: string) => {
  return Geocode.fromAddress(currentAddr)
    .then((response) => {
      const { lat, lng } = response.results[0].geometry.location;
      return { lat, lng };
    })
    .catch((err) => console.log(err));
};

export default GeoCode;

 

자세한건 위에서 올려놨던 npm 라이브러리의 주소나 깃허브에 가면 자세히 나와있다 아주 사용하기 쉽다.