모바일 웹에서 카카오맵 앱 호출하여 띄울려고 할 경우

모바일 웹에서 카카오맵 앱 호출하여 띄울려고 할 경우

 

스크립트 코드

(function () {

    /**
     * 사이트 네임스페이스 초기화
     */
    var initNamespace = function() {
        if (typeof window.lddi === 'undefined') {
            window.lddi = {
                util: {},
                siteCode: {}
            };
        }
    };


    var AppLink = {
        aosUrl: 'intent://scan/#Intent;scheme=kakaomap;package=net.daum.android.map;end',
        iosUrl: 'http://itunes.apple.com/app/id304608425',
        customSchemeMain: 'kakaomap://', //수정 2021.07.06
        googlePlayUrl: 'https://play.google.com/store/apps/details?id=net.daum.android.map',
        isIPHONE: (navigator.userAgent.match('iPhone') != null || navigator.userAgent.match('iPod') != null),
        isIPAD: (navigator.userAgent.match('iPad') != null),
        isANDROID: (navigator.userAgent.match('Android') != null),
        isMobile: function () {
            if (AppLink.isANDROID || AppLink.isIPHONE || AppLink.isIPAD) {
                return true;
            } else {
                alert('모바일 환경에서만 동작합니다.');
                return false;
            }
        },
        installApp: function () {
            if (AppLink.isIPHONE || AppLink.isIPAD) {                
                // 2019-03-22 timer
                AppLink.iosLink();
            } else if (AppLink.isANDROID) {
                AppLink.androidIntent(AppLink.aosUrl);
            }
        },
        executeApp: function (url) {
            if (AppLink.isIPHONE || AppLink.isIPAD) {
                window.location.href = url;
            } else if (AppLink.isANDROID) {
                AppLink.androidCustomScheme(url);
            }
        },
        ios: function () {
            AppLink.iosLink();

            window.location.href = AppLink.customSchemeMain; //앱이동
        },
        /**
         * ios 마켓 링크 이동
         */
        iosLink: function () {
            var clickedAt = +new Date;
            setTimeout(function () {
                if (+new Date - clickedAt < 2000) {
                    window.location.href = AppLink.iosUrl;
                }
            }, 1500);
        },
        androidIntent: function (url) {
            var b = new Date();
            setTimeout(function () {
                if (new Date() - b < 1500) {
                    window.location.href = url;
                }
            }, 500);
        },
        /**
         * android 커스텀스킴 이동
         */
        androidCustomScheme: function (customScheme) {
            setTimeout(function () {
                var iframe = document.createElement('iframe');
                iframe.style.visibility = 'hidden';
                iframe.src = customScheme;
                document.body.appendChild(iframe);
                document.body.removeChild(iframe); // back 호출시 캐싱될 수 있으므로 제거
            }, 1000);
        },
        android: function () {
            if (AppLink.isANDROID || AppLink.isIPHONE || AppLink.isIPAD) {
                AppLink.androidIntent(AppLink.aosUrl);
                AppLink.androidCustomScheme(AppLink.customSchemeMain);
            } else {
                window.location.href = AppLink.googlePlayUrl;
            }
        },
        appMove: function (customScheme, isAppMove) {
            if (!customScheme) {
                //main 이동
                customScheme = AppLink.customSchemeMain;
            }

            // 바로 앱 이동일 경우
            if (isAppMove) {
                if (AppLink.isANDROID) {
                    AppLink.androidIntent(AppLink.aosUrl);
                }

                AppLink.executeApp(customScheme);
            } else {
                if (!AppLink.isMobile()) return;
                AppLink.installApp(); //app move
                AppLink.executeApp(customScheme);
            }
        }
    };

    (function () {
        initNamespace();
        lddi.AppLink = AppLink;
    })();

    return lddi;
})();

 

버튼에 click 이벤트 설정하기

<a onclick="lddi.AppLink.appMove('',false);return false;" title="K5 찾기 페이지로 이동" class="btn">
<img src="../../content/images/main/fixed-btn-01.png" alt="K5 찾기">
</a>

 

참고자료

https://play.google.com/store/apps/details?id=net.daum.android.map

카카오맵 - 대한민국 No.1 지도앱 ( 지도 / 내비게이션 / 대중교통 / 로드뷰 ) - Google Play 앱

https://apps.apple.com/kr/app/%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%B5-%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD-no-1-%EC%A7%80%EB%8F%84%EC%95%B1/id304608425

‎카카오맵 - 대한민국 No.1 지도앱

https://m.lotteshopping.com/

메인