프로젝트에서 위치를 지도 위의 마커로 표현해야 하는 화면이 있어 @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
에 넣어준다.
- Next에서 사용할 경우
- GoogleMap
- 기본
zoom
정도와 기본 위치(center
)를 설정해주고,mapContainerClassName
를 사용해 className값을 전달해주었다.(Wrapper 참고)
- 기본
- MarkerF
- React 18 이후로는
<Marker/> 태그
대신<MarkerF/>
를 사용해줘야 한다. - custom Marker를 사용하고 싶을 경우
icon
내에 img url과 scale 값을 지정해준다.
- React 18 이후로는
참고 링크 :
https://www.youtube.com/watch?v=9e-5QHpadi0
'Front-end > Module' 카테고리의 다른 글
[http-proxy-middleware] proxy사용해서 CORS에러 해결하기 (0) | 2023.01.27 |
---|---|
[react-daum-postcode] 정확한 주소값 받아오기 (0) | 2022.10.07 |
[Module] Yup & Formik 정리 (0) | 2022.08.23 |
[styled-components] TypeScript에서 전역 스타일(Global Style) 적용하기 (0) | 2022.06.29 |
[react-slick] dots css 커스텀하기 (0) | 2022.06.04 |