지도 줌인아웃시 Uncaught TypeError: a.e is not a function

지도/로컬 API
#1

서버 데이터에 담긴 위경도 정보를 ajax 로 가지고 와서 그 위경도에 해당하는 장소에 마커를 찍는 작업을 진행중입니다.
처음 url이 로딩 되었을때, 그리고 지도를 마우스로 줌 인, 줌 아웃 할 때 마다 이 에러가 뜨는데요

Uncaught TypeError: a.e is not a function
    at wa (kakao.js:17)
    at Zc.c.lb (kakao.js:76)
    at B.c.z (kakao.js:131)
    at B.c.aa (kakao.js:132)
    at h.c.Hf (kakao.js:179)
    at B.$.C (kakao.js:123)
    at marker:u7981:

콘솔에 데이터를 찍히는 걸 보면 데이터는 제대로 받아와지는데
무슨 이유에서인지 지도에서 오류가 나는지 모르겠어서 글 올려봅니다.

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
      mapOption = { 
          center: new kakao.maps.LatLng(37.502, 127.026581), // 지도의 중심좌표
          level: 12 // 지도의 확대 레벨
      };

    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

    // 커스텀 오버레이에 표시할 내용입니다     
    // HTML 문자열 또는 Dom Element 입니다 
    var content = '<div class="overlaybox">' +
        `    <img src="../../static/images/marker_ex.png">` +
        '  </div>';

    // 커스텀 오버레이가 표시될 위치입니다
    var position = [];

    $.ajax({
        url: "{% url 'posts:getApi' %}",
        dataType: "json",
        success: function (data) {
            console.log(data);
            var apiTest = "";
            for (var i = 0; i < data.length; i++) {
                position.push({
                    latlng: new kakao.maps.LatLng(data[i].fields.lat, data[i].fields.lng)
                });
            }
        },
        error: function (request, status, error) {
            console.log('실패');
        },
        async: false
    });

    for(var i = 0; i < position.length; i++) {
        // 커스텀 오버레이를 생성합니다
        var customOverlay = new kakao.maps.CustomOverlay({
            position: position[i],
            content: content,
        });

        // 커스텀 오버레이를 지도에 표시합니다
        customOverlay.setMap(map);
    }
#2

자문자답합니다 비슷한 오류가 나시는 분들이 구글링을 통해서 해결하시길 바랍니다
커스텀 오버레이 생성 쪽에 있는 for문을 없애고 그 안에 있는 커스텀 오버레이 생성 + 찍기 코드를 ajax 통신 내부의 for문안에 넣어서 해결했습니다 :slight_smile:

1개의 좋아요