[@react-google-maps/api] Google 지도에 Custom Marker 나타내기

프로젝트에서 위치를 지도 위의 마커로 표현해야 하는 화면이 있어 @react-google-maps/api 라이브러리를 사용해 구현해 보았다.

google, kakao, naver 중 google API를 선택한 이유

프로젝트 내에 google address api를 사용해 주소를 가져오는 기능도 있었기에, 지도를 띄우는 것도, google address api에서 발급받은 API 키를 동일하게 사용할 수 있어 google address api를 사용하게 되었다.

왜 @react-google-maps/api인가

다른 라이브러리에 비해 Weekly Downloads가 높았고,
Last publish 도 내 기준 7일전으로, 업데이트가 꾸준히 진행되고 있는 것 같았다.
구글 공식 유튜브계정인 Google Maps Platform에서도 해당 라이브러리를 참고한 예시를 볼 수 있어 접근성이 좋았다.

부딪친 문제

구글 지도와 마커를 찍는 것 까지는 좋았으나, 새로고침 시에 계속 마커가 없어지는 현상이 일어났다.

몇 시간 구글링 해본 결과 버전 문제였고, 18 버전에서 <Marker/> 대신 <MarkerF/>를 사용하여 해결할 수 있었다.

적용 / Google 지도에 Custom Marker 나타내기

    "react": "18.1.0"

먼저 해당 라이브러리를 사용하기 위해서, 특히 마커를 표시하기 위해서는 react 버전을 잘 확인해야 한다.
(공식문서의 설명은 18 이전 버전이다😭)

 

공식문서

import {GoogleMap, LoadScriptNext, MarkerF} from '@react-google-maps/api'
import {useMemo} from 'react'
import styled from 'styled-components'

function MapComponent() {
  const center = useMemo(() => ({lat: 12.345, lng: 678.910}), [])

  return (
    <Wrapper>
      <LoadScriptNext googleMapsApiKey={`${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`}>
        <GoogleMap zoom={18} center={center} mapContainerClassName="map-container">
          <MarkerF position={center} icon={{url: '/images/icons/map_marker.svg', scale: 5}} />
        </GoogleMap>
      </LoadScriptNext>
    </Wrapper>
  )
}
export default MapComponent

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

• LoadScriptNext
  • Next에서 사용할 경우 <LoadScript/>대신 <LoadScriptNext/>를 사용해준다.
  • 발급받은 API 키를 googleMapsApiKey에 넣어준다.
• GoogleMap
  • 기본 zoom정도와 기본 위치(center)를 설정해주고, mapContainerClassName를 사용해 className값을 전달해주었다.(Wrapper 참고)
• MarkerF
  • React 18 이후로는 <Marker/> 태그 대신 <MarkerF/>를 사용해줘야 한다.
  • custom Marker를 사용하고 싶을 경우 icon내에 img url과 scale 값을 지정해준다.

참고 링크 :

https://stackoverflow.com/questions/72112491/marker-not-showing-react-google-maps-api-on-localhost-next-js

Marker not showing @react-google-maps/api on localhost next.js

https://www.youtube.com/watch?v=9e-5QHpadi0