카카오내비

카카오내비 API는 카카오내비 서비스에서 제공하는 API를 말하며, 길찾기, 목적지 공유 기능을 제공합니다.

예제: 카카오내비를 이용해 길찾기 시작하기

  • 웹 페이지에 카카오내비의 길찾기 버튼을 추가하는 예제입니다.

카카오내비 앱을 호출하여 목적지까지 길안내를 실행합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>API Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="navi" href="#" onclick="navi();">
<img src="/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 카카오 로그인 버튼을 생성합니다.
    function navi(){
        Kakao.Navi.start({
            name: "현대백화점 판교점",
            x: 127.11205203011632,
            y: 37.39279717586919,
            coordType: 'wgs84'
        });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

카카오내비와 관련된 자세한 내용이 궁금하다면? Kakao.Navi 레퍼런스

예제: 카카오내비를 이용해 목적지 공유하기

  • 웹 페이지에 카카오내비의 목적지 공유 버튼을 추가하는 예제입니다.

카카오내비 앱을 호출하여 목적지를 공유합니댜.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>API Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="navi" href="#" onclick="navi();">
<img src="/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 카카오 로그인 버튼을 생성합니다.
    function navi(){
        Kakao.Navi.share({
            name: "현대백화점 판교점",
            x: 127.11205203011632,
            y: 37.39279717586919,
            coordType: 'wgs84'
        });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

카카오내비와 관련된 자세한 내용이 궁금하다면? Kakao.Navi 레퍼런스


Last Modified : 2017-07-28