요즘은 A지점에서 B지점까지 안내해 주는 지도 앱과 서비스가 수없이 많지만, 단연 최강자는 단 하나입니다. 바로 구글 지도(Google Maps)죠. 저는 PC, 태블릿, 그리고 스마트폰에서도 대부분의 시간을 구글 지도로 보내고 있습니다. 가장 정확한 데이터, 다양한 내비게이션 및 경로 옵션, 그리고 스트리트 뷰, 도보·자전거·대중교통 정보 같은 강력한 기능까지 갖추고 있기 때문입니다.
그런데 구글 지도 웹사이트 밖에서 지도나 길찾기를 사용해야 한다면 어떻게 해야 할까요? 예를 들어 결혼식 웹사이트나 개인 블로그를 운영하고 있다면, 방문자가 자신의 출발지 주소를 입력하면 자동으로 행사 장소까지의 경로를 안내받을 수 있으면 참 좋겠죠!
이런 기능을 구현하는 방법은 크게 두 가지가 있습니다. 첫 번째는 가장 쉬운 방법으로, 구글 지도에서 생성한 코드를 이용해 지도를 웹페이지에 그대로 삽입하는 것입니다. 두 번째 방법은 조금 더 기술적이지만 훨씬 유연하고 동적인 결과물을 얻을 수 있습니다. 아래에서 두 가지 방법을 모두 소개합니다.
방법 1. 구글 지도 임베드하기
특정 위치에서 다른 위치까지의 경로만 보여주면 된다면, 현재 보고 있는 지도를 임베드 코드로 삽입하는 것이 가장 간단합니다. 먼저 구글 지도에서 원하는 경로를 설정한 뒤, 화면 우측 하단의 톱니바퀴(설정) 아이콘을 클릭하세요.
'지도 공유 또는 퍼가기(Share or embed map)'를 선택한 후 '지도 퍼가기(Embed map)' 탭으로 이동합니다. 여기서 원하는 지도 크기를 선택하고 iframe 코드를 복사해서 원하는 웹페이지 어디든 붙여넣으면 끝입니다.
다만 이 방법의 단점은 사용자가 정적인 지도만 볼 수 있다는 점입니다. 아래의 두 번째 방법을 활용하면, 사용자가 출발지 주소를 직접 입력할 수 있는 폼을 만들어 해당 주소에서 내가 지정한 목적지까지의 경로가 자동으로 생성되도록 할 수 있습니다.
방법 2. 구글 지도 길찾기 폼 만들기
두 번째 방법이 어떤 의미인지 감이 잘 안 오신다면, 아래 예시처럼 미국 주소를 입력해 보세요. 입력한 위치에서 목적지까지의 길찾기 결과가 바로 나타납니다.
꽤 멋지지 않나요? 이런 작은 폼은 HTML 코드를 넣을 수 있는 어떤 웹사이트나 블로그에도 손쉽게 만들 수 있습니다. 특히 소규모 사업장 웹사이트의 문의 페이지에 넣으면, 방문자가 주소를 복사하고 새 창을 열어 다시 입력하는 번거로운 과정 없이 한 번에 빠르게 길찾기를 받을 수 있어 매우 유용합니다.
구글 지도 URL 구조 이해하기
그렇다면 이 커스텀 길찾기 폼은 어떻게 만들까요? 먼저 구글이 길찾기에 사용하는 URL의 올바른 형식을 알아야 합니다. 다행히 두 지점 사이의 경로를 검색한 후 주소창의 URL을 복사하면 쉽게 파악할 수 있습니다. 페이지 맨 아래의 작은 톱니바퀴 아이콘을 클릭해 '지도 공유 또는 퍼가기'를 선택해도 됩니다.
공유 링크 탭에는 브라우저 주소창과 동일한 URL이 표시됩니다. 실제 URL은 아래와 같이 상당히 깁니다.
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/data=!3m1!4b1!4m13!4m12!...
상당히 복잡하죠? 예전 구글 지도의 URL 파라미터는 매우 직관적이었지만, 새로운 URL 구조는 꽤 복잡해졌습니다. 다행인 점은 예전 방식의 파라미터를 그대로 사용해도 구글이 자동으로 새 버전으로 변환해 준다는 것입니다. 아래 링크 형식을 확인해 보세요.
https://maps.google.com/maps?saddr=start&daddr=end
직접 시험해 보세요. 출발지와 목적지 주소를 따옴표로 묶어 넣고 브라우저에 붙여넣으면 됩니다. 예를 들어 start를 뉴올리언스로, end를 휴스턴으로 바꾼 URL은 다음과 같습니다.
https://maps.google.com/maps?saddr="new orleans, la"&daddr="houston, tx"
정상적으로 작동합니다! 물론 지도가 완전히 로드되면 구글이 링크를 훨씬 복잡한 형태로 변환하지만, 우리에게 필요한 것은 이렇게 간결하게 전달 가능한 URL이라는 점을 기억하세요.
길찾기 폼 HTML 코드 작성하기
이제 이 URL을 활용해 출발지 주소와 목적지 주소 두 개의 필드를 가진 간단한 폼을 만들 차례입니다. 방문자가 자신의 주소만 입력하면 내 위치까지의 길찾기를 받도록 하려면, 두 번째 필드는 숨기고 목적지 주소를 미리 지정해 두면 됩니다.
<form action="https://maps.google.com/maps" method="get" target="_blank">
Enter your starting address:
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="854 Deerfield Rd, Allen, TX" />
<input type="submit" value="get directions" />
</form>
위 코드를 살펴보겠습니다. 첫 줄은 폼을 시작하며, 제출 버튼을 클릭하면 데이터가 maps.google.com/maps로 전송되도록 지정합니다. target="_blank"는 결과가 새 창에서 열리도록 하는 옵션입니다. 그다음에는 비어 있는 출발지 주소 입력란(text box)이 있고,
두 번째 입력란은 숨겨져(hidden) 있으며 값으로 우리가 원하는 목적지 주소가 설정되어 있습니다. 마지막으로 '길찾기(Get Directions)'라는 제출 버튼이 배치됩니다. 이제 누군가 자신의 주소를 입력하면 아래와 같은 결과 화면을 보게 됩니다.
URL 파라미터로 지도 더욱 커스터마이징하기
몇 가지 추가 파라미터를 사용하면 길찾기와 지도를 더 세밀하게 조정할 수 있습니다. 예를 들어 기본 화면이 일반 지도가 아니라 위성뷰(Satellite)로 열리면서 교통 상황(Traffic)까지 표시되길 원한다면 아래와 같이 URL을 구성할 수 있습니다.
https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
URL에서 layer=t와 t=h 부분에 주목하세요. layer=t는 교통 정보 레이어를 의미하고, t=h는 하이브리드 지도를 뜻합니다. t 값은 다음과 같이 변경할 수 있습니다.
- m: 일반 지도
- k: 위성 지도
- h: 하이브리드 지도
- p: 지형 지도
z는 확대/축소 수준(zoom level)으로 1부터 20까지 설정할 수 있으며, 위 URL에서는 7로 지정되어 있습니다. 이 파라미터들을 최종 URL에 덧붙이기만 하면, 여러분의 사이트에 고도로 커스터마이징된 구글 지도 길찾기 폼을 완성할 수 있습니다!
진행 중에 궁금한 점이나 문제가 있다면 댓글로 남겨주세요. 성심껏 도와드리겠습니다. 즐거운 코딩 되세요!