Uncaught TypeError: kakao.maps.MarkerClusterer is not a constructor

  <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가 나옵니다. 라이브러리가 잘 안 불러와지는 것 같은데, 어떤 부분이 문제일까요?

script를 중복해서 로드하고 있습니다.
아래와 같이 라이브러리 파라미터를 포함한 SDK 1개만 import 해주세요.

<!--   <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>
1개의 좋아요

잘 해결됐습니다 감사합니다!

1개의 좋아요