Google Maps API 활용하기

지난번에 마커를 지우지 못해 Google Maps말고 다른 방법은 없나 찾아보던 중, 그럴 필요가 없어졌다는 소식과 함께 Google Maps API에서 다양하게 지원하는 지도 제작 및 설정 정보를 가져왔다. 한글 정보가 많이 없는 것 같아서 정리해보았다.

Google Maps API 인증 및 사용

우선 Google Cloud Platform에 접속한다.

Google Cloud Platform:

클라우드 컴퓨팅, 호스팅 서비스, API | Google Cloud

그리고 로그인 후 (지난번에 언급했듯 결제 정보가 반드시 필요하다.) 무료 크레딧을 이용하거나, 미리 결제해서 필요한 만큼 크레딧을 확보한다. 

이후 왼쪽 상단의 메뉴 버튼을 누른다.

위와 같은 화면이 나오고, 'API 및 서비스' 항목에 접속한다.

API 및 서비스 탭에서 위와 같은 Maps JavaScript API를 인증받으면 된다.

정상적으로 API 사용 설정이 완료되면 확인하였을 때 위와 같은 화면을 볼 수 있다.

Google Maps 지도 스타일 추가

이제 Google Maps에서 제공하는 툴을 사용자화하여 프로젝트에 적용할 수 있는 방법을 정리한다.

우선 Google Cloud Platform에 접속했을 때 가장 먼저 발견한 메뉴바의 Google Maps Platform 항목에 접속한다. 

지도 스타일 항목에 들어가면 위와 같은 화면을 볼 수 있다. 나는 이미 두 개의 지도 스타일을 제작해놓았고, 동그라미 친 스타일 만들기 버튼을 눌러 새로운 지도 스타일을 사용자화 할 수 있다.

구글이 만들어놓은 몇 개 항목 중에서 선택할 수도 있다. 나는 학교 대표색과 잘 어울리는 색을 찾고 있었고, 이 때문에 아무거나 선택해 만든 다음 화면 아래 저장 버튼을 눌러 저장했다. 저장 옆의 스타일 편집기에서 열기 항목을 선택하면 저장을 특별히 거치지 않고 지도를 필요에 맞는 스타일로 수정할 수 있다.

Google Maps 지도 스타일 수정

기능 유형에 따라 분류되어 있고, 전체를 선택하면 land, ocean 구분하지 않고 모든 색을 변경할 수 있다.

Google Maps 지도 색 변경

예를 들면 위와 같은 식으로 색깔을 변경할 수 있다. Visibility는 화면상 보이게 할지의 여부를 다루는 항목이다. Color는 RGB, HSL, HEX 값으로 변경할 수 있으며, 나는 ClipStudio라는 그림툴을 통해 교내 어플리케이션에서 사용한 색의 rgb 값을 따와 사용했다. 

Google Maps 지도 관심 장소 표시

프로젝트를 진행하기 위해 핵심이 되는 Advanced Marker를 사용해 적절한 지도를 제작하기 위해서는 기존 명소, 비즈니스 장소 등의 정보가 최소한이 되어야 한다. 위처럼 명소 항목에 들어가 마커 및 정보를 최소화할 수 있었다.

 

위아래 사진을 비교해보자. 아래 그림처럼 전체를 Visibility-off 상태로 만들면 관련 장소 정보가 보이지 않게 된다.

한편, 요소 유형에서 마커를 선택하고 Visibility-off 상태를 선택하면 줌아웃시 마커만 보이지 않고 해당 장소의 정보는 남아있다.

모든 설정을 완료하면 오른쪽 상단의 저장 버튼을 눌러준다. 지도 스타일이 무사히 저장된 것을 보고난 다음에는 '지도 관리' 항목에 접속한다.

완성된 지도 스타일 ID 생성 및 적용

지도 ID 생성

지도 만들기 버튼을 누르고 이름과 설명, 유형을 적어 지도 ID를 생성한다. 이 때 지도 형식을 자바스크립트로 하면 래스터(Raster)와 벡터(Vector) 중 선택할 수 있다. 나는 대단한 확대나 축소를 허용하지 않을 것이므로 Raster로 생성하였다. 

지도 스타일에 아까 만든 사용자 지도 스타일을 선택해 넣으면 된다.

MapId는 다음과 같은 인수로 Maps에 추가할 수 있다.

window.initMap = function () {
    const map = new google.maps.Map(document.getElementById("map"),{
        mapId: "965667819ca2549a",
        zoom: 16,
        minZoom: 13,
        maxZoom: 19,
        gestureHandling: "cooperative",
    });
};