구글지도 플랫폼 사용을 위해 카드정보 입력하지 않고 API Key 생성하기

사이트에 구글지도 API를 사용할 때 대략 2016년 이전에 구글지도와 함께 운용하던 사이트에는 키(Key)를 사용하지 않아도 가능했지만, 그 이후에는 키가 필수였습니다. 그러나 이제는 2016 이전의 사이트에도 키가 필수로 변경되었습니다. 따질 필요 없이 이제는 키는 필수라고 생각하면 되는데, 문제는 서비스 화면이 변경되어 경험이 없는 분들에게는 1분 걸리는 일이 어렵다는 것입니다.

또, 사용자 동의 없이 결제가 되는 것은 아니지만, 카드정보를 입력하는 단계가 추가되어 번거로운 과정이 늘었습니다. 그러나, 괜히 친절한 ‘대화형 가이드’ 화면을 사용하지 않으면 카드정보 입력 과정을 생략하는 것도 가능합니다. 나중에 강제로 카드정보 입력 과정을 구겨 넣을지도 모를 일이지만.

초보자를 위한, 사이트에서 구글지도(Maps JavaScript API)를 사용하기 위해 API 키를 획득하는 과정을 살펴봅니다. 물론, 획득한 하나의 키를 지도에만 사용할 수 있는 것이 아닌 선택의 문제이며, 구글지도는 ‘구글지도 플랫폼(Google Maps Platform)’이라는 이름으로 변경되었습니다.

구글 계정과 접근 경로

구글 서비스는 워낙 많고, API 서비스 같은 개발 서비스 사이트에서 목적을 이루기에 초보자를 포함하여 자주 접근하지 않을 때는 ‘미로’와 같습니다. 구글 계정, 보통 Gmail 계정으로 부르는 계정으로 크롬 브라우저에 로그인 또는 계정이 있다는 가정에서, 빠른 목적을 이루기 위해 다음 주소로 바로 접근합니다.

Google Cloud Platform Console

다음 그림처럼 환영 글자와 첫 번째 단계가 나옵니다. 그림 참고하여 진행합니다.

구글지도 플랫폼 1단계

프로젝트 생성

하나의 프로젝트 기준에서 API 서비스를 진행할 수 있으므로 다음 그림처럼 ‘탐색 메뉴’를 클릭하여 빠르게 진행합니다.

구글지도 플랫폼 2단계

‘라이브러리’ 메뉴를 먼저 클릭하여 ‘Maps JavsScript API’ 등 원하는 라이브러리를 활성화해도 되는데, 그림처럼 ‘사용자 인증 정보’를 먼저 클릭합니다. 순서는 상관이 없습니다.

구글지도 플랫폼 사용자 인증 정보

다음 그림은 프로젝트가 없을 때 나오는 화면입니다. ‘만들기’ 버튼을 클릭합니다.

워드프레스 8 - 무료 이미지 저장소

구글지도 플랫폼 프로젝트 만들기

프로젝트 이름은 원하는 것으로 입력하면 되며, 그림을 참고하여 이름을 입력하고 ‘만들기’ 버튼을 클릭합니다.

구글지도 플랫폼 프로젝트 이름 입력

API 키 생성

프로젝트를 만들면 자동으로 다음 그림과 같은 화면으로 이동합니다. 그림 참고하여 ‘사용자 인증 정보 만들기’ 하위의 ‘API 키’를 선택합니다.

구글지도 플랫폼 프로젝트 API 키

다음 그림처럼 자동으로 키가 생성되며, 키만 복사하고 ‘닫기’를 누른 후 ‘Maps JavsScript API’ 라이브러리만 활성화하여 자신의 사이트에 키를 사용하면 구글지도를 사용할 수 있습니다.

구글지도 플랫폼 프로젝트 API 키 생성

이때, 키는 웹에서 소스에 쉽게 노출되므로 특정 도메인의 사이트나 아이피(테스트를  위한 로컬호스트 또는 서버 단위 등)에 제한할 필요가 있습니다. 선택의 문제이지만, ‘키 제한’을 눌러 다음 단계로 진행합니다. 키는 나중에 또 확인할 수 있지만, 이 단계에서 복사하여 필요한 곳에 입력해도 됩니다.

API 키 제한

키 제한은 ‘애플리케이션 제한’과 ‘API 제한’ 탭 2가지를 제공하고 있습니다. 다음 그림을 참고하여 적절하게 선택하고 저장하세요. API 제한 설명은 생략하며, 뒤에 활성화하는 ‘Maps JavaScript API’는 API 제한 목록에 현재 나오지 않습니다.

구글지도 플랫폼 프로젝트 API 키 사용 제한

Maps JavaScript API 라이브러리 활성화

키 제한 설정 후 저장하면 다음 그림이 나옵니다. 왼쪽 ‘라이브러리’ 메뉴를 클릭합니다.

구글지도 플랫폼 프로젝트 라이브러리

‘Maps JavaScript API’ 선택하세요.

구글지도 플랫폼 Maps JavaScript API 라이브러리

다음 그림이 나오면 ‘사용 설정’ 버튼을 클릭하여 활성화합니다.

구글지도 플랫폼 Maps JavaScript API 라이브러리 활성

이 단계를 끝으로 사이트에서 구글지도를 사용할 수 있습니다. 키를 사이트에 등록하지 않았다면 등록하여 구글지도 마커와 인포윈도 등의 출력 및 위도와 경도 데이터 연동에 관하여 점검하면 됩니다.

어떤 의견이 있거나 궁금한 무언가 있다면 다음 링크의 사이트를 이용하세요.

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.