[React/Google Map] 구글맵 기본 마커 지우기

이번 프로젝트에서는 구글맵을 이용해서 웹사이트를 만들어야 했다.

그래서 구글맵을 다루는 방법을 차근차근 기록하려한다.

이번 포스팅은 구글맵에서 기본적으로 표시되는 마커를 지우는 방법이다.

 

구글맵을 리액트로 불러와준다. (이건 나중에 제대로 익히고 나서 포스팅하도록 하겠다.)

 

1. 기본으로 출력되는 지도

구글맵 API를 사용하면 기본적으로 랜드마크, 식당, 주차장 등 마커들이 표시된 지도가 출력 된다.

내가 사용해야할 지도는 이러한 정보가 필요 없었기 때문에, 최대한 깔끔한 지도를 출력하고 싶었다.

 

2. 마커 출력 설정 해주기

구글맵에서 기본으로 제공해주는 기능이다. 아래의 사이트로 들어간다.

https://mapstyle.withgoogle.com/

Styling Wizard: Google Maps APIs

 

 

사이트에 들어가면 왼쪽에 이렇게 지도의 스타일을 조정하는 부분이 보인다.

이 슬라이드바를 원하는 만큼 조절하면 위 처럼 지도상의 마커를 어느정도로 표시할 지 설정할 수 있다.

 

원하는 정도로 설정한 후, Finish를 누른다.

 

그러면 아래와 같은 창이 뜰것이다.

여기서 COPY JSON을 눌러주었다.

 

3. 리액트에 적용하기

myStyles라는 변수를 하나 만들고

 

아까 복사한 JSON을 복사 붙여넣기 한다.

 

그리고 아래처럼 options에 styles로 적용시켜준다.

 

4. 결과

그러면 아래와 같이 불필요한 마커들이 삭제된다.

 

끝!