매장 정보를 외부 지도 링크로 전달하고 확인하기

검색 결과와 방문 경로 잇기

목록에서 매장을 골랐다면 이용자는 그곳에 가는 방법을 알고 싶어 합니다. 좌표를 외부 지도에 넘기면 이동 경로는 지도 서비스에서 확인할 수 있습니다. 검색 목록이 보여준 직선거리와 지도에서 나온 도보 경로가 다른 것은 별도로 설명해야 합니다.

바쿠오 로컬 demo/src/utils/navigation.ts에는 Kakao 좌표 링크, Naver 주소 검색, Google 목적지 링크가 있습니다. 이 글은 공식 문서로 확인한 Kakao·Google 형식을 독립 예제로 다룹니다. 현재 공개 서비스와 모든 모바일 기기의 동작을 확인했다는 의미는 아닙니다.

서비스마다 다른 링크 형식

Kakao 지도 URL 안내는 이름·위도·경도를 경로에 넣는 형식을 설명합니다. Google Maps URLs는 목적지와 이동 수단을 쿼리로 받으며 api=1을 요구합니다. 이 URL 기능에는 Google API 키가 필요하지 않습니다.

주소 검색 링크는 목적지 좌표를 지정한 길찾기 링크와 다릅니다. 이름이 비슷한 지점이 여러 곳이면 검색 결과에서 다시 선택해야 할 수 있습니다. 버튼 이름도 실제 동작에 맞춰 “지도에서 검색”과 “길찾기”를 구분합니다.

이름과 좌표를 안전하게 넣기

아래 전체 코드는 브라우저 콘솔이나 Node.js에서 실행합니다. URL을 만들고 파라미터를 검사할 뿐 외부 지도를 자동으로 열지 않습니다. 입력 이름·좌표는 예시이며 실제 환전소 정보가 아닙니다.

function buildMapLinks(name, lat, lng) {
  if (typeof name !== 'string' || name.trim() === '') {
    throw new TypeError('Place name is required');
  }
  if (!Number.isFinite(lat) || !Number.isFinite(lng)
      || Math.abs(lat) > 90 || Math.abs(lng) > 180) {
    throw new RangeError('Valid numeric coordinates are required');
  }
  const label = name.trim().replace(/[,/]/g, ' ');
  const kakao = 'https://map.kakao.com/link/to/'
    + encodeURIComponent(label) + ',' + lat + ',' + lng;
  const google = new URL('https://www.google.com/maps/dir/');
  google.searchParams.set('api', '1');
  google.searchParams.set('destination', lat + ',' + lng);
  google.searchParams.set('travelmode', 'walking');
  return { kakao, google: google.href };
}

const links = buildMapLinks('Example & Annex', 37.5, 127);
console.log(new URL(links.google).searchParams.get('destination'));
// 37.5,127
console.log(links.kakao.includes('Example%20%26%20Annex'));
// true

출력은 37.5,127과 true입니다. 이름의 &가 다른 쿼리 항목으로 해석되지 않게 인코딩하고, Kakao 경로 구분에 쓰는 쉼표·슬래시는 표시용 이름에서 공백으로 바꿨습니다. 원본 이름은 목록에 그대로 보관합니다.

앱이 없어도 확인할 수 있게

Google 공식 안내는 기기에 앱이 있는지에 따른 앱·브라우저 연결을 설명합니다. 그렇더라도 실제 사용 환경의 새 탭 차단, 로그인 상태, 서비스 접근 가능성은 직접 확인해야 합니다. 앱 전용 스킴을 만들고 짧은 타이머 뒤에 “설치 안 됨”으로 단정하는 방식은 정확하지 않을 수 있습니다.

웹 링크를 일반 <a href>로 제공하면 키보드와 링크 복사도 사용할 수 있습니다. 새 탭을 쓴다면 새 창임을 알리고 rel="noopener noreferrer"를 적용합니다. 방문자의 위치를 URL에 자동 삽입하기 전에는 실제로 필요한지와 전달 의미를 확인합니다.

게시 전에 목적지까지 확인하기

매장 이름에 공백·&·쉼표가 있어도 원하는 목적지를 가리키는지 확인합니다.
위도·경도를 뒤집거나 빠뜨렸을 때 링크를 만들지 않는지 확인합니다.
휴대전화에서 앱이 있는 경우와 없는 경우, 데스크톱에서 각각 목적지를 확인합니다.
선택한 이동 수단과 도착 지점이 의도한 값인지 지도 화면에서 확인합니다.

URL 생성 테스트가 통과해도 실제 출입구나 매장의 영업 여부를 검증한 것은 아닙니다. 원래 목록으로 돌아갈 경로와 주소 복사를 함께 제공하면 외부 지도에서 문제가 생겨도 이용자가 확인을 이어가기 쉽습니다.

바쿠오 · 사용 안내 →