카카오맵 API를 활용해 여러 장소에 마커 추가하기

카카오맵 API는 웹 개발에서 지도 기능을 쉽게 구현할 수 있는 강력한 도구입니다. 특히 여러 장소를 표시해야 할 때 마커를 추가하는 기능이 유용하죠. 이 포스팅에서는 카카오맵 API를 사용해 지도에 여러 마커를 추가하고 관리하는 방법을 단계별로 설명하겠습니다. 기본 예제부터 시작해 실제 코드로 구현해보겠습니다. 이 내용은 카카오맵 공식 문서를 기반으로 합니다.

준비 단계: API 키 발급과 기본 설정

카카오맵 API를 사용하려면 먼저 개발자 콘솔에서 앱을 등록하고 JavaScript 키를 발급받아야 합니다.

• 카카오 개발자 사이트(https://developers.kakao.com)에 가입하세요.

• 새 앱을 생성하고 JavaScript 키를 복사합니다.

• HTML 파일에 스크립트를 추가하세요: <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은_APP_KEY"></script>.

이 키를 사용해 지도를 초기화합니다. 지도의 중심 좌표와 확대 레벨을 설정하는 기본 코드는 다음과 같습니다.

var mapContainer = document.getElementById('map'); // 지도를 표시할 div

var mapOption = {

    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표

    level: 3 // 지도의 확대 레벨

};

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

기본 마커 추가하기

먼저 하나의 마커를 추가하는 방법부터 알아보죠. 마커는 특정 위치에 핀 모양의 이미지를 표시합니다. 위치는 위도(Lat)와 경도(Lng)로 지정합니다.

var marker = new kakao.maps.Marker({

    position: new kakao.maps.LatLng(33.450701, 126.570667)

});

marker.setMap(map); // 마커를 지도에 표시

이 코드를 사용하면 지도에 간단히 마커가 나타납니다.

여러 장소에 마커 추가하기

여러 장소를 표시하려면 위치 배열을 만들어 반복문을 사용합니다. 각 마커에 제목(title)을 추가하면 마우스 오버 시 표시됩니다. 또한 커스텀 이미지를 사용해 마커를 더 멋지게 만들 수 있습니다.

아래는 여러 마커를 표시하는 예제 코드입니다. positions 배열에 위치와 제목을 넣고, for 루프로 마커를 생성합니다.

var positions = [ { title: '카카오', latlng: new kakao.maps.LatLng(33.450705, 126.570677) }, { title: '생태연못', latlng: new kakao.maps.LatLng(33.450936, 126.569477) }, { title: '텃밭', latlng: new kakao.maps.LatLng(33.450879, 126.569940) }, { title: '근린공원', latlng: new kakao.maps.LatLng(33.451393, 126.570738) } ]; var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; // 마커 이미지 주소 for (var i = 0; i < positions.length; i++) { var imageSize = new kakao.maps.Size(24, 35); // 이미지 크기 var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); var marker = new kakao.maps.Marker({ map: map, // 표시할 지도 position: positions[i].latlng, // 위치 title: positions[i].title, // 제목 image: markerImage // 커스텀 이미지 }); }

이 코드를 실행하면 지도에 4개의 마커가 표시됩니다. 각 마커는 별도의 위치에 핀으로 나타나며, 마우스를 올리면 제목이 보입니다.

마커 제어하기: 표시/숨기기

마커가 많아지면 관리가 필요합니다. 배열에 마커를 저장해 한 번에 표시하거나 숨길 수 있습니다. 예를 들어 클릭 이벤트로 마커를 추가하고, 버튼으로 제어하는 방법입니다.

var markers = []; // 마커 배열 function addMarker(position) { var marker = new kakao.maps.Marker({ position: position }); marker.setMap(map); markers.push(marker); // 배열에 추가 } function setMarkers(map) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } } function showMarkers() { setMarkers(map); } // 마커 보이기 function hideMarkers() { setMarkers(null); } // 마커 숨기기

HTML에 버튼을 추가하면:<button onclick="hideMarkers()">마커 숨기기</button> <button onclick="showMarkers()">마커 보이기</button>

지도 클릭 시 마커를 추가하려면 이벤트 리스너를 등록하세요:

kakao.maps.event.addListener(map, 'click', function(mouseEvent) { addMarker(mouseEvent.latLng); });

이 기능으로 동적으로 마커를 관리할 수 있습니다.

추가 팁: 인포윈도우와 클러스터링

• 인포윈도우 추가: 마커 클릭 시 상세 정보를 표시하려면 인포윈도우를 사용하세요. 마커 클릭 이벤트에 연결합니다.

• 클러스터링: 마커가 너무 많으면 클러스터러를 써서 그룹화하세요. 이는 지도가 확대/축소될 때 유용합니다.

• 위치 데이터: 실제 장소의 위도/경도는 카카오맵 검색 API로 얻을 수 있습니다.

마무르기

카카오맵 API를 활용하면 여러 장소를 쉽게 표시할 수 있습니다. 위 예제를 바탕으로 프로젝트에 적용해보세요. 더 복잡한 기능이 필요하다면 공식 문서의 다른 샘플을 참고하세요. 이 포스팅이 도움이 되길 바랍니다!

처음으로 카카오맵