목적지 목록에 방문순서가 표시가 되지만, 지도에서 해당 위치가 어디인지 명확히 알 수 없어 지도의 마커에 정보가 담겨있었으면 좋겠다는 피드백이 있었습니다.
이를 해결하기 위해 우선 카카오맵 API 페이지에 들어가 해당 기능과 맞는 정보를 찾으러가서 저에게 필요한 내용과 정확히 일치하는 탭을 보게되었습니다.
https://apis.map.kakao.com/web/sample/removableCustomOverlay/
이 페이지의 내용에 따르면 마커를 클릭 시 정보창이 출현하고 정보창의 우측 상단에 있는 x버튼을 클릭하면 정보창이 닫히는 간단명료한 정보창의 사용예시였습니다.
기대를 품고 해당 코드를 가지고 작성된 코드에 맞춰넣어 테스트를 해보았으나 실패했습니다. 정확히 말하자면 작동은 하지만 닫기 버튼을 클릭할 때 정보창만 닫혀야 하지만 이미 제가 만들어놓은 클릭 시 해당 지점에 마커를 생성하는 기능과 동시 실행되어 정보창이 닫히면서 클릭했던 자리에 마커가 생기는 현상이 생겼습니다.
이를 해결하기 위해 stopPropagation이라는 이벤트 버블링을 막아주는 함수도 사용해보고 정보창이 살아있을 때 클릭 시 마커생성기능을 비활성화 하는 등의 방안을 시도해 보았으나 모두 실패했습니다.
이후 저는 다른 방안을 찾기 위해 다시 카카오맵 API 사이트를 탐색했고 다른 방법을 발견해 다른 방향으로 선회하기로 마음먹었습니다.
https://apis.map.kakao.com/web/sample/addMarkerMouseEvent/
다음 방법은 클릭으로 정보창이 나오는 구조가 아닌 마우스 호버 시 정보창이 나오는 구조의 예시였습니다.
저 사이트의 기본 정보창은 굉장히 단순한 박스구조였기에 기존의 박스 형식을 유지하면서 이 사이트의 호버기능을 혼합하기로 결심했습니다.
// 정보창에 들어갈 정보
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
position.title +
' <div class="close" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="' + imagePath + '" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">' + positon_addr + '</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
marker.setMap(map); // 마커를 지도에 표시일단 정보창에 들어갈 정보를 html로 만들어 content 라는 변수에 저장했습니다. 현재 이 코드는 positions라는 목적지 배열을 인자로 받는 함수 내부에 있는 코드이며 position은 해당 배열을 for문으로 돌려 나온 배열안의 값 중 하나입니다.
// 정보창 생성
var infowindow = new kakao.maps.InfoWindow({
content: content
});
// marker와 infowindow의 이벤트 연결
(function (marker, infowindow) {
kakao.maps.event.addListener(marker, 'mouseover', function () {
infowindow.open(map, marker);
});
kakao.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
});
})(marker, infowindow);// 방금 정의된 함수를 호출, 이 호출로 각 마커들은 자신만의 함수 스코프를 가지게됨
markers.push(marker); // 마커 배열에 추가이제 infowindow에 정보창의 내용을 지닌 정보창 생성을 할당해주고
마커 생성을 할당받은 marker와 연결해줍니다. 처음 시도했을 때 목적지를 추가하게 되면 이전 목적지에 마우스를 올려도 나중에 추가한 목적지의 정보창만 나왔는데 이는 for문을 돌면서 마지막 목적지에만 이벤트가 적용되었기 때문이였습니다.
이를 방지하기위해 marker와 infowindow를 연결해주고 클로저를 이용해 방금 정의한 함수를 바로 호출해 각 마커들은 자신만의 함수 스코프를 가지게 만들었습니다.
이 행위로 각 마커들은 고유한 함수 스코프를 가지게 되어 각 마커에 마우스를 올리면 각각의 정보창을 띄울 수 있게 됩니다.
CSS는 아직 더 잡아야하지만 해당 기능을 정상적으로 띄울 수 있게되어 너무 기쁩니다.
