Today I Learned

[google map] react에서 구글 맵 연동하기 / 1탄. 마커 찍기

떼굴펜 2024. 7. 29. 20:37

0. GOOGLE MAP에서 API KEY를 발급받자

[공식문서] 리액트 구글 맵 시작하기 가이드

  1. 구글 맵 API KEY 발급받기 : https://developers.google.com/maps/get-started?hl=ko

 

1. install package (https://visgl.github.io/react-google-maps/)

npm install @vis.gl/react-google-maps

 

2. react component

<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

참고) API provider 속성 (문서)

 

3. 지도 id, style 연결하기

markder 찍으려고 시도하니 지도 ID가 없으면 고급 마커 못쓴다 함.. 아 그냥 루트 그리는 걸로 넘어갈까.. 조금 고민했다. marker 는 deprecated 시켰으면서  AdvancedMarker 쓰려면 셋팅을 더해야한다니 다시 또 셋팅셋팅해봅시다

 

 

3-1. 지도 ID 만들기

링크 : https://console.cloud.google.com/google/maps-apis/studio/maps?hl=ko

참고) 벡터 vs 래스터

- 벡터 : 선, 곡선, 점 등을 이용하여 이미지를 만든다. (확대/축소해도 깨지지 않음, ex svg 파일)

- 래스터 : 픽셀로 구성된 이미지 (ex. jpeg)

 

 

3-2. 지도 style 만들기

기존 스타일 그대로 가려면 저장을, 새로운 스타일 넣고 싶으면 편집기에서 열기를 누른다.
편집기에서는 원하는 요소(관심장소, 행정구역 등)에 대한 표시 여부와 색상을 커스텀할 수 있다.

 

 

3-3. 생성한 스타일과 지도 ID를 연결한다.

 

 

3-4. 생성한 mapId를 코드에 넣기

return (
    <APIProvider
      apiKey="YOUR_API_KEY"
      libraries={["maps"]}
    >
      <Map
        mapId="YOUR_MAP_ID"
        style={{ width: "100%", height: "100vh" }}
        defaultZoom={12}
        defaultCenter={{ lat: 37.514575, lng: 127.0495556 }}
      >
        <Marker></Marker>
      </GoogleMap>
    </APIProvider>
  );

mapId까지 코드에 넣어주니 요로코롬 잘 뜬다.

 

 

 

 

 

 

메모) 구글 맵 연동 문서 모으기