Connect a listing to the journey

After choosing a listing, a visitor needs a way to get there. Passing a destination to a map lets that service calculate a route. Explain that the listing’s straight-line estimate and the walking route can differ.

Local BAKUO demo/src/utils/navigation.ts contains a Kakao coordinate link, a Naver address search, and a Google destination link. This independent example covers Kakao and Google formats checked against official documentation. It does not verify the deployed service or every mobile device.

Each service has its own URL contract

The Kakao map URL guide describes a name, latitude, and longitude in the path. Google Maps URLs accepts destination and transport-mode parameters and requires api=1. This URL feature does not require a Google API key.

An address-search URL is not the same as a coordinate destination for directions. Similar place names may require another choice on the results screen. Use labels such as “search on map” and “directions” according to the actual action.

Encode the name and validate coordinates

Run this complete block in a browser console or Node.js. It creates and inspects URLs without opening a map. The name and coordinates are teaching inputs, not a real exchange office.

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

It prints 37.5,127 and true. Encoding keeps the ampersand in the name; commas and slashes used as Kakao path delimiters are replaced in the link label. Preserve the original name in the listing.

Allow a usable web path

Google documents its app/browser handling across platforms. Still check the environments you support for new-tab blocking, sign-in state, and service availability. An app-only scheme followed by a short timer cannot reliably establish that an app is absent.

An ordinary <a href> keeps keyboard activation and link copying available. Announce a new tab and use rel="noopener noreferrer" when opening one. Before automatically adding a visitor’s origin, check whether it is needed and what is being shared.

Check the destination before publishing

  1. Check a name containing spaces, an ampersand, or a comma.
  2. Missing or invalid coordinates should prevent link creation.
  3. Check the destination on desktop and on phones with and without the map app.
  4. Confirm the selected transport mode and arrival point on the map itself.

A URL-generation test does not verify the entrance or whether a business is open. Keep a way back to the listing and an address-copy option so the visitor can continue checking when an external map is unavailable.

BAKUO · How to use →