구글, 카카오, 네이버 지도 연동하기

요즘 대부분 사이트에는 주소와 함께 지도가 연동되어 있는 것을 볼 수 있습니다. 오늘은 웹 페이지에 지도를 연동하는 방법을 알아보겠습니다.

1. 구글 지도 (링크)

우선 구글 지도에서 원하는 주소를 검색한 후 주소 하단에 있는 공유 버튼을 클릭하시면 위의 이미지와 같이 팝업 창을 볼 수 있습니다. 팝업 내 상단의 지도 퍼가기를 클릭하시면 검색한 위치가 iframe 코드로 생성된 것을 확인하실 수 있습니다.

해당 코드를 복사 후 html 파일에 붙여 넣으면 지도 정보가 연동됩니다. iframe 코드 내 width, height, style 등은 수정이 가능하고, 따로 css 파일 내에 넣어서도 작업이 가능합니다. 

2. 카카오 지도 (링크)

카카오맵에서 원하는 주소를 검색하시면 해당 주소 정보를 확인하실 수 있습니다. 공유 버튼 > html 태그 복사 > 소스 생성하기 순으로 클릭하면 아래와 같은 팝업을 보실 수 있습니다.

소스 생성하기 팝업 내 일반 지도와 이미지 지도, 두 가지 방법 중 원하는 방법을 선택하시면 됩니다.

- 일반 지도 : 지도의 확대, 축소 및 이동이 가능하고 javascript 포함

- 이미지 지도 : 지도의 확대, 축소 및 이동이 불가능하고 javascript를 지원하지 않는 환경에서 이용 가능

일반 지도에 생성된 소스를 html 파일에 붙여넣으면 해당 위치의 지도가 연동된 것을 확인하실 수 있습니다.

3. 네이버 지도 (링크)

구글 지도와 카카오 지도의 경우, 지도 상에서 간단하게 정보를 가져올 수 있는 반면 네이버 지도를 사용하기 위해선 네이버 클라우드 플랫폼 가입을 해야 합니다. 가입 시 결제 수단 등록 안내를 받게 되는데 부분 유료 서비스이기 때문에 무료 제공 한도를 초과할 경우 비용이 청구됩니다. 요금 관련해서는 서비스 > maps (링크)에서 확인하실 수 있습니다.

가입 완료 후 메인 페이지 상단의 콘솔을 클릭 후 보이는 위 이미지와 같은 화면에서 AI∙NAVER API > Application 등록 순으로 진행하시면 아래와 같이 이름 설정과 서비스 선택, 서비스 환경 등록을 할 수 있는 페이지가 나옵니다.

* 애플리케이션 사용 가이드 (링크) 

해당 페이지에서 서비스 선택과 정보 작성 후 등록을 하면 애플리케이션 리스트를 확인하실 수 있습니다.

인증 정보 팝업 내에서 스크립트 작성에 필요한 클라이언트 ID를 확인하실 수 있습니다.

네이버 지도 API(링크) 설명에 안내된 html 예제입니다. 위와 같이 작성 후 확인한 클라이언트 ID값을 빨간 테두리 내에 넣어주시면 해당 서비스를 이용하실 수 있습니다. 기본 예제 외에도 옵션 조정하기, 유형 설정하기, 좌표 경계 확인하기 등 다양한 예제를 참고해 설정하실 수 있습니다.