(4) 카카오 지도 API - 정보창 표시하기

다음은 카카오 지도 API의 정보창 표시하기 입니다.

사실 이 기능을 어떻게 활용하느냐에 따라서 마커와 정보창의 기능을 이벤트에 따라 다르게 구현할 수 있습니다. 주로 사용되는 이벤트는 클릭(click), 마우스 올리기(mouseover), 마우스 내리기(mouseout) 등입니다.

먼저 실행결과와 스크립트를 확인해 주시기 바랍니다.

간단하게 설명하면 마커의 위치에 따른 정보창을 배열로 선언하고 for 문을 통해 반복해 주었습니다. 이 때 마커를 클릭하면 정보창 출현 이벤트가 발생되도록 하였고 맵을 클릭하면 열려있는 모든 정보창이 닫히도록 하였습니다.

마커를 마우스를 클릭하면 각 장소에 입력된 내용 정보창(infowindow) 내용이 표시되고

지도에 클릭 이벤트가 발생하면 정보창(infowindow)이 닫히도록 스크립트를 작성하였다

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(37.5546788, 126.9706069), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
var positions = [
    {
        content: '<div>서울역</div>', 
        latlng: new kakao.maps.LatLng(37.5546788, 126.9706069)
    },
    {
        content: '<div>서울특별시청</div>', 
        latlng: new kakao.maps.LatLng(37.5668260, 126.9786567)
    },
    {
        content: '<div>을지로 입구역</div>', 
        latlng: new kakao.maps.LatLng(37.5660373, 126.9821930)
    },
    {
        content: '<div>덕수궁</div>',
       latlng: new kakao.maps.LatLng(37.5655638, 126.97489)
    }
];

for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng // 마커의 위치
    });

    // 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });

    // 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
    // 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    (function(marker, infowindow) {
        // 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다 
        kakao.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

        // 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
        kakao.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
    })(marker, infowindow);
}
</script>

이 예제에서 중요한 것은 아래의 function(marker. infowindow) 입니다. 마커와 정보창을 변수로 이용하는 함수의 이벤트 kakao.maps.event.addListener를 통해 구현하는데 마커를 클릭하면 정보창이 열리도록 하였고

(marker, ‘click’, function() {infowindow.open(map, marker)};

맵을 클릭하면 정보창이 닫히도록도록 하였습니다.

(map, ‘click’, function() {infowindow.close()};.

이를 이용하면 마우스를 올리거나 내릴 때 또는 다른 동작에 의해서 마커와 정보창의 출현을 컨트롤 할 수 있게 됩니다.

단, 해당 스크립트에서는 정보창을 클릭하는 만큼 모두 열리게 되는데 일반적인 상용 위치기반 서비스에서는 사용자의 웹서비스 가독성을 위하여 한번에 한 개의 정보창만 열리도록 구성되어 있습니다.

해당 기능을 구현하는 것도 그렇게 어렵지는 않으니 직접 응용해 보시기 바랍니다. 힌트는 for 구문의 바깥에 정보창(infowindow) 변수를 생성하는 것입니다. :)

2022.12.17 - [정보기술] - (5) 카카오 지도 API - 커스텀 정보창 표시하기

(5) 카카오 지도 API - 커스텀 정보창 표시하기

2022.12.17 - [정보기술] - (1) 카카오 지도 API - 지도 만들기 2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기 2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기 2022.12.17 - [

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기 (0)	2022.12.17
(5) 카카오 지도 API - 커스텀 정보창 표시하기 (0)	2022.12.17
(3) 카카오 지도 API - 다중 마커 표시하기 (0)	2022.12.17
(2) 카카오 지도 API - 단일 마커 표시하기 (0)	2022.12.17
(1) 카카오 지도 API - 지도 만들기 (0)	2022.12.17

당신과 나의 어바웃 라이프

(4) 카카오 지도 API - 정보창 표시하기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(4) 카카오 지도 API - 정보창 표시하기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바