<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey" ></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey&libraries=clusterer"></script>
<script>
console.log("지도")
var mapContainer2 = document.getElementById('map'), // 지도를 표시할 div
mapOption2 = {
center: new kakao.maps.LatLng(40, 126), // 지도의 중심좌표
level: 10, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
console.log("맵")
console.log(map2) // 값 잘 있음
console.log(kakao.maps) // MarkerClusterer 없음
console.log(kakao.maps.MarkerClusterer) //undefined
// 마커 클러스터러를 생성합니다
// index.html:419 Uncaught TypeError: kakao.maps.MarkerClusterer is not a constructor 발생
var clusterer2 = new kakao.maps.MarkerClusterer({
map: map2, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
console.log("클러스터러") // 에러 때문에 console에 안 찍힘
console.log(clusterer2) // 에러 때문에 console에 안 찍힘
// 지도에 마커를 생성하고 표시한다
const marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(40, 126), // 마커의 좌표
map: map2 // 마커를 표시할 지도 객체
});
clusterer2.addMarker(marker);
</script>
console.log(map2)
부분에서 map2는 잘 생성되고 있고, console.log(kakao.maps.MarkerClusterer)
는 undefined가 나옵니다. 라이브러리가 잘 안 불러와지는 것 같은데, 어떤 부분이 문제일까요?