google map api 적용(react-google-maps/api)

리액트에 Google Maps API 적용 하기

• 기본적으로 Google Maps Platform 공식문서를 보고도 적용할 수 있지만 TS, JS로 된 예제밖에 나와있지 않기 때문에 React에 적용하는데 살짝 번거로움이 있어서 따로 라이브러리를 사용하는게 좋다고 생각했다.
• react-google-maps/api를 선정한 이유는 사용량이 가장 높고 최근까지 업데이트 되고 있기 때문이다.
• Google Maps Platform에 react-wrapper이 나와있긴 하지만 react-google-map/api 보다 사용량이 적어서 사용하지 않았다.

적용

• google maps api key를 받아와야 한다.
  유료는 아니지만 카드를 등록해야 프로젝트를 등록하고 KEY를 받을 수 있다.

install

npm i -S @react-google-maps/api

코드

기본적으로 위도(latitude)와 경도(longitude)로 위치 정보를 불러온다.

예시

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

function GoogleMapComponent() {
  // 맵 로드시 처음으로 띄워줄 지역의 위도(latitude) 경도(longitude) 정보
  const center = {
    lat: 37.5511694,
    lng: 126.9882266
  };
  
  const options = {
    zoom: 16,
    mapTypeId: 'satellite' // 위성 뷰로 지정 
  };
  
  // 지도를 불러오는 함수
  // useJsApiLoader 함수는 isLoaded, loadError를 return 한다.
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    // google maps 에서 받은 api key를 전달
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
  });

  // 지도를 그릴때 동작하는 함수
  // google map의 instance를 사용할 수 있다.
  const onLoad = useCallback(map => {
    map.setCenter(center);
    map.setOptions(options);
    map.setHeading(90);
  }, []);

  // 지도 컴포넌트가 언마운트 되기 전에 해야하는 동작을 아래 함수에 넣는다.
  const  onUnmount={map => {
    "do your stuff before map is unmounted"
  }};

  return isLoaded && (
      <GoogleMap
        id="google-map-test"
        mapContainerStyle={GoogleMapStyle} // width와 height 는 반드시 지정해줘야 한다.
      >
        // react 18+ 의 경우에는 MarkerF 등 F가 붙은 컴포넌트를 사용해야한다.
        <MarkerF
          position={{ lat: 37.5511694, lng: 126.9882266 }} title="marker title1" 
        />
      </GoogleMap>
  );
}

export default React.memo(GoogleMapComponent);

const GoogleMapStyle = {
  'height': '100vh',
  'width': '100%'
};

필수 옵션

1. center: lat, lng 값을 객체로 전달해 주는 것으로 지도 첫 화면을 셋팅 할 수 있다.
2. zoom: 0부터 20사이의 숫자로 지정 가능하며, 지도의 확대/축소 수준을 표시한다.

예시

<GoogleMap
  mapContainerStyle={ GoogleMapStyle } 
  center=
  zoom={16}
/>

map props

1. mapTypeId: 타입은 총 4가지로 구성되어있으며 loadmap이 기본이다.
   • loadmap: 일반 거리 지도 출력
   • terrain: 일반 거리 지도 위에 물리적인 지형지물 함께 출력
   • satellite: 위성 지도 출력
   • hybrid: 위성 지도 위에 라벨 함께 출력
2. heading: 지도가 보여지는 방위를 조절
3. tilt: 지도가 보여지는 각도를 조절. 특정 zoom 수준에서만 지원되며 0 또는 45만 지원됨

예시

<GoogleMap
  mapContainerStyle={ GoogleMapStyle } 
  center=
  zoom={16}
  mapTypeId={'satellite'}
  heading={90}
  tilt={45}
/>