지도를 켰을때 초기에 마커를 안나오게 설정할 수 있나요?

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.

켰을 때 모든 마커가 나와서 어지러운데 초기화면에는 마커가 안나오고 카테고리를 눌렀을 때 카테고리에 관한 마커들만 띄우고 싶어요. 지금 카테고리를 누르면 그에 맞는 마커들은 띄울 수 있게 해놓은 상태입니다.

#2

@uzzi

왠지 마커 생성할 때 옵션으로

    map: map,

를 기본으로 넣으신게 아닐까 싶은데요

Kakao 지도 Web API Documentation

실제 마커가 떠야할 시점에 setMap() 을 써 보세요

Kakao 지도 Web API Documentation

그리고,
이런 문의는 실제 구현하신 코드를 알아야 다른 분들이 보시고 정확한 가이드를 주실 수 있습니다.

#3 
/*
4. 마커에 인포윈도우 붙이기
*/

async function setMap(dataSet){
    for (let value of dataSet) {

    var imageSrc = `https://i.ibb.co/X73nkP6/map-marker-1.png`, // 마커이미지의 주소입니다    
    imageSize = new kakao.maps.Size(40, 40); // 마커이미지의 크기입니다
    //imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
      
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize),
    markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

        // 마커를 생성합니다
        let coords = await getCoordsByAddress(value.address);
        
        let marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: coords, // 마커를 표시할 위치
        image:markerImage
        });    

        markerArray.push(marker);

    // 커스텀 오버레이를 생성합니다
    let customOverlay = new kakao.maps.CustomOverlay({
        position: coords,
        clickable: true,
        xAnchor: 0.5,
        yAnchor: 1.3
    });

    // 커스텀 오버레이 엘리먼트를 만들고, 컨텐츠를 추가합니다
    let contentsHead = document.createElement("div");
    contentsHead.className = "head";

    let contentsTitle = document.createElement("a");
    contentsTitle.className = "title";
    contentsTitle.innerHTML = value.title;

    let contentsDesc = document.createElement("div");
    contentsDesc.className = "desc";

    let contentsAddress = document.createElement("span");
    contentsAddress.className = "address";
    contentsAddress.innerHTML = value.address;

    contentsHead.append(contentsTitle, contentsDesc);
    contentsDesc.append(contentsAddress);

    customOverlay.setContent(contentsHead);

    customOverlayArray.push(customOverlay);

    kakao.maps.event.addListener(marker, "click", () => {
        if (this.clickedOveray) {
          this.clickedOveray.setMap(null);
        }
        customOverlay.setMap(map);
        this.clickedOveray = customOverlay;
        // 클릭한 곳으로 중심 옮기기
        map.panTo(coords);
      });
      kakao.maps.event.addListener(map, "click", function () {
        customOverlay.setMap(null);
      });
    }
    
}

/*
5. 카테고리 분류
*/

// 카테고리 
const categoryMap = {
    allGasStation : "전체 주유소",
    payBackGas : "페이백 주유소",
    noPayBack : "페이백 제외 지점",
};

const categoryList = document.querySelector(".category-list");
categoryList.addEventListener("click", categoryHandler);

async function categoryHandler(event){

    const categoryId = event.target.id;
    const category = categoryMap[categoryId];
    console.log(category);

    try {
    // 데이터 분류
    let categorizedDataSet = await getDataSet(category);

    // 기존 마커 삭제
    closeMarker();

    // 인포윈도우 삭제
    closeCustomArr();
    

    setMap(categorizedDataSet);

    } catch (error) {
        console.error(error);
    }
}

let markerArray = [];
function closeMarker(){
    for(marker of markerArray){
        marker.setMap(null);
    }
}

let customOverlayArray = [];
function closeCustomArr(){
    for(customOverlay of customOverlayArray)
    customOverlay.setMap(null);
}

async function setting(){
    try {
        const dataSet = await getDataSet();
        setMap(dataSet);
    } catch (error) {
        console.error(error);
    }
    
}

setting();

현재 코드 입니다…!