한 페이지 내에서 카카오맵과 카카오 공유를 둘다 사용하고 있습니다.
그런데 카카오 공유에서 문제가 발생하네요
이런 오류가 발생하면서 공유 버튼에서 응답이 없습니다.
Kakao.init이 중복됐다길래 코드에서 빼면 또 이런 에러가 발생하네요…
카카오 공유 에러 종류랑은 상관없이 카카오맵은 또 잘 굴러 갑니다
이게 카카오맵 쪽이랑 충돌을 일으키는걸까요?
에러 내용으로 유추해보면 Kakao.init을 여러번 호출하신 것 같은데요.
다시 확인 부탁드려요.
원인 파악을 위해 저희가 접근할 수 있는 서비스 URL을 알려주실 수 있으신가요?
공개하시기 어려우시면 메시지로 보내주셔도 됩니다.
개인적인 프로젝트여서 민감한건 없으니 그냥 코드를 올리겠습니다.
<div class="store_buttons_div">
<i class="fas fa-heart" onclick="favorite()"></i>
<button type="button" id="find_road">길찾기</button>
<span id="share_kakao"><i class="fas fa-share-alt-square"></i></span> <!-- 공유하기 버튼 -->
</div>
</div>
<script type="text/javascript">
function favorite() {
if(<%=request.getSession(false) != null && request.getSession().getAttribute("user") != null%>) {
var url = window.location.href;
document.favoriteForm.hrefURL.value=url;
favoriteForm.submit();
} else {
alert("로그인 후 사용할수 있는 기능입니다.");
console.log("test");
}
};
</script>
<!-- map -->
<div class="map_sec">
<div class="map" id="map"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey={개인키}&libraries=services&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center : new kakao.maps.LatLng(${listShop.shopLocationX}, ${listShop.shopLocationY}), // 지도의 중심좌표
level : 3
// 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
var marker = new kakao.maps.Marker({
map : map,
position : new kakao.maps.LatLng(${listShop.shopLocationX}, ${listShop.shopLocationY})
});
let storeName = ${listShop.shopLocationX};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도에 마커를 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(${listShop.shopLocationX}, ${listShop.shopLocationY})
});
var content = '<div class="wrap">'
+ ' <div class="info">'
+ ' <div class="title">'
+ " ${listShop.shopName}"
+ ' <div class="close" onclick="closeOverlay()" title="닫기"></div>'
+ ' </div>' + ' <div class="body">'
+ ' <div class="img">' + ' </div>'
+ ' <div class="desc">'
+ ' <div class="ellipsis";>'
+ " ${listShop.shopAddress}" + ' </div>'
+ ' <div class="jibun ellipsis">(우)'
+ "${listShop.shopPost}" + '</div>' + ' </div>'
+ ' </div>' + ' </div>' + '</div>';
//마커 위에 커스텀오버레이를 표시합니다
//마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content : content,
map : map,
position : marker.getPosition()
});
//마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
//커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
</script>
<script src="/static/js/store_detail.js" ></script> <!-- 길찾기, 공유 스크립트 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</div>
여기서 공유하기 버튼을 누르게 되면 아래 store_detail.js에서 shareKakao() 함수가 실행되는 방식입니다.
어디서 Kakao.init이 여러번 호출됐는지 모르겠네요
// ------길찾기기능
var findRoadBtn = document.getElementById('find_road'); //길찾기 버튼
var storeName1 = "${listShop.shopName}";
var storeAddress = "${listShop.shopAddress}";
//가맹점 위도와 경도 넣기
var lat = '${listShop.shopLocationX}', //위도
lon = '${listShop.shopLocationY}'; //경도
//가맹점명, 위도, 경도 입력
var link = 'https://map.kakao.com/link/to/' + storeName1 + ',' + lat + ',' + lon;
findRoadBtn.addEventListener('click', () => {
window.open(link);
});
var shareBtn = document.getElementById('share_kakao');
shareBtn.addEventListener('click', () => {
shareKakao();
});
function shareKakao() {
// 사용할 앱의 JavaScript 키 설정. 현재 안지우면 오류, 지워도 오류 발생
Kakao.init('{키}');
// 카카오링크 버튼 생성
Kakao.Link.createDefaultButton({
container: '#share_kakao', // 카카오공유버튼ID
objectType: 'feed',
content: {
title: storeName,
description: storeAddress,
imageUrl: 'http://www.sisaweekly.com/news/photo/202004/31524_47677_5735.jpg',
link: { //공유할 링크 넣어주세요. (가맹점 정보)
mobileWebUrl: "https://map.kakao.com/link/to/" + storeName1 + ',' + lat + ',' + lon,
webUrl: "https://map.kakao.com/link/to/" + storeName1 + ',' + lat + ',' + lon
}
}
});
}Kakao.Link.createDefaultButton 함수를 사용하신게 원인으로 보입니다.
해당 함수에서 #share_kakao에 클릭 이벤트를 등록하는데, 클릭 이벤트를 중복으로 또 등록하셨어요.
그래서 클릭할 때마다 두 번씩 호출되는 것으로 보입니다.
이렇게 직접 클릭 이벤트를 등록하실 때는 Kakao.Link.sendDefault를 사용해주세요.
참고: 카카오링크 데모
그리고, 클릭할 때마다 shareKakao() 함수가 호출되어서 매번 Kakao.init을 호출하게 되는데요.
kakao.min.js가 로딩된 후에 한 번만 호출하시거나,
아래와 같이 JS SDK가 초기화되었는지 확인하는 코드를 추가해주세요.
if (!Kakao.isInitialized()) {
Kakao.init('JAVASCRIPT_KEY')
}