카카오지도 API - 커스텀오버레이

지도/로컬 API
#1

안녕하세요!
카카오 OPEN API로 웹페이지를 구현 연습 하고 있는 직장인입니다!!

카카오 MAP API 페이지에 나온 커스텀오버레이 코드를 참고하여 2개의 마커를 생성하고 오버레이 창까지는 띄웠으나
닫기부분이 2번째 contents만 실행이 되고 첫번째 contents는 닫기가 실행을 못하는 오류가 생겨 질문 남깁니다.

여러 답변을 찾아보니 content를 HTMLElement로 바꿔서 해보라는 글을 많이 보았는데 입력해둔 content가 많아서 어떻게 바꿔야하는 지를 모르겠어서…
HTMLElement로 바꾸지 않고 지금 코드에서 닫기를 구현 할 수 있는 방법이 있다면 설명 부탁드립니다!! 감사합니다.
혹시 방법이 없다면 HTMLElement로 바꾸는 방법이라도 설명해주시면 감사드리겠습니다.

 var positions = [
{
    title: '001해상풍력',
    latlng: new kakao.maps.LatLng(34.650407, 124.859134)
},
{
    title: '002해상풍력',
    latlng: new kakao.maps.LatLng(35.014124, 125.352512)
}
];
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

var imageSize = new kakao.maps.Size(24, 35);

var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

for (var i = 0; i < positions.length; i++) {

    var marker = new kakao.maps.Marker({
    map: map, 
    position: positions[i].latlng, 
    title: positions[i].title, 
    image: markerImage 
     });
}

var contents = ['<div class="wrap">' +
'    <div class="info">' +
'        <div class="info_title">' +
'            001해상풍력단지' +
'            <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
'        </div>' +
'        <div class="body">' +
'            <div class="desc">' +
'                <div class="titles">단지이름</div>' +
'                <div class="lists">001해상풍력</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">사업자명</div>' +
'                <div class="lists">한국전력</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">단지규모</div>' +
'                <div class="lists">400MW</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">해역정보</div>' +
'                <div class="lists">수심 : 평균 00m, 최대 00m</div>' +
'                <div class="lists">풍속 : 평균 00㎧, 최대 00㎧</div>' +
'            </div>' +
'        </div>' +
'    </div>' +
'</div>',
'<div class="wrap">' +
'    <div class="info">' +
'        <div class="info_title">' +
'            002해상풍력단지' +
'            <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
'        </div>' +
'        <div class="body">' +
'            <div class="desc">' +
'                <div class="titles">단지이름</div>' +
'                <div class="lists">002해상풍력</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">사업자명</div>' +
'                <div class="lists">한국전력</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">단지규모</div>' +
'                <div class="lists">300MW</div>' +
'            </div>' +
'            <div class="desc">' +
'                <div class="titles">해역정보</div>' +
'                <div class="lists">수심 : 평균 00m, 최대 00m</div>' +
'                <div class="lists">풍속 : 평균 00㎧, 최대 00㎧</div>' +
'            </div>' +
'        </div>' +
'    </div>' +
'</div>'];


for (var i = 0; i < contents.length; i++) {

    var overlay = new kakao.maps.CustomOverlay({
        map: map,
        content: contents[i],
        position: positions[i].latlng
    });
} 

kakao.maps.event.addListener(marker, 'click', function () {
    overlay.setMap(map);
});

function closeOverlay() {
    overlay.setMap(null);
}
#2

아래 코드는 title과 close 버튼을 갖는 content 입니다.
코드 참고해서 body와 desc도 생성해서 지도에 표시해주세요.

positions.forEach(position => {
    var wrap = document.createElement('div');
    wrap.className = 'wrap';

    var info = document.createElement('div');
    info.className = 'info';

    var infoTitle = document.createElement('div');
    infoTitle.className = 'info_title';
    infoTitle.innerText = position.title;

    var close = document.createElement('div');
    close.className = 'close';
    close.title = '닫기';
    close.onclick = function() {
        overlay.setMap(null);
    }

    info.appendChild(infoTitle);
    info.appendChild(close);
    wrap.appendChild(info);

    //TODO: body, desc HTMLElement를 생성해주세요.

    var overlay = new kakao.maps.CustomOverlay({
        map: map,
        content: wrap,
        position: position.latlng
    });
});
1개의 좋아요
#3

감사합니다!!
그런데 첫번째 마커는 click 이벤트가 안먹는것같습니다!!
두번째 마커를 선택할때 첫번째 마커도 같이 커스텀 오버레이가 뜨네요!
한번더 봐주시면 감사드리겠습니다.

positions.forEach(position => {
var wrap = document.createElement('div');
wrap.className = 'wrap';

var info = document.createElement('div');
info.className = 'info';

var infoTitle = document.createElement('div');
infoTitle.className = 'info_title';
infoTitle.innerText = position.title + '단지';

var close = document.createElement('div');
close.className = 'close';
close.title = '닫기';
close.onclick = function () {
    overlay.setMap(null);
}

var body = document.createElement('div');
body.className = 'body';

var desc = document.createElement('div');
desc.className = 'desc';

var titles = document.createElement('div');
titles.className = 'titles';
titles. = '단지이름';

var lists = document.createElement('div');
lists.className = 'lists';


info.appendChild(infoTitle);
info.appendChild(close);
wrap.appendChild(info);
wrap.appendChild(body);
body.appendChild(desc);
desc.appendChild(titles);
desc.appendChild(lists);



var overlay = new kakao.maps.CustomOverlay({
    map: map,
    content: wrap,
    position: position.latlng
});


kakao.maps.event.addListener(marker, 'click', function () {
    overlay.setMap(map);
});  
});
#4

marker를 하나 더 생성해 봤는데 close를 누르고 다시 마커 누르면 오버레이가 생성되는 부분은 다 마지막 마커에서만 가능합니다!
positions에 넣은 마지막 마커를 누를때 다른 마커에서도 오버레이가 나와요

#5

forEach문 안에 마커와 커스텀 오버레이 객체 생성을 같이 해주셔야합니다.

var positions = [
    {
        title: '001해상풍력',
        latlng: new kakao.maps.LatLng(34.650407, 124.859134)
    },
    {
        title: '002해상풍력',
        latlng: new kakao.maps.LatLng(35.014124, 125.352512)
    }
];

var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var imageSize = new kakao.maps.Size(24, 35);
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

positions.forEach(position => {
    var wrap = document.createElement('div');
    wrap.className = 'wrap';

    var info = document.createElement('div');
    info.className = 'info';

    var infoTitle = document.createElement('div');
    infoTitle.className = 'info_title';
    infoTitle.innerText = position.title + '단지';

    var close = document.createElement('div');
    close.className = 'close';
    close.title = '닫기';
    close.onclick = function () {
        overlay.setMap(null);
    }

    var body = document.createElement('div');
    body.className = 'body';

    var desc = document.createElement('div');
    desc.className = 'desc';

    var titles = document.createElement('div');
    titles.className = 'titles';
    //TODO: Element의 어떤 속성에 값을 넣을건지 설정해주세요.
    // titles. = '단지이름';

    var lists = document.createElement('div');
    lists.className = 'lists';

    info.appendChild(infoTitle);
    info.appendChild(close);
    desc.appendChild(titles);
    desc.appendChild(lists);
    body.appendChild(desc);
    wrap.appendChild(body);
    wrap.appendChild(info);

    var marker = new kakao.maps.Marker({
        map: map,
        position: position.latlng,
        title: position.title,
        image: markerImage
    });

    var overlay = new kakao.maps.CustomOverlay({
        map: map,
        content: wrap,
        position: position.latlng
    });

    kakao.maps.event.addListener(marker, 'click', function () {
        overlay.setMap(map);
    });
});
1개의 좋아요
#6

정말감사합니다!! 닫기 부분 정말 잘 해결되었습니다!!