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

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까지 코드에 넣어주니 요로코롬 잘 뜬다.

 

 

 

 

 

 

---

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

• 특정 위치에 장소 마크 찍기
  • maps lib : https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference/library-interfaces?hl=ko#MapsLibrary 
  • maker : https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference/advanced-markers?hl=ko#AdvancedMarkerElement

• 경로 그리기 
  • https://console.cloud.google.com/google/maps-apis/discover/text-directions?project=genuine-sector-430902-r9
  • https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference/library-interfaces?hl=ko#RoutesLibrary